真棒字体5-图标位置反转 [英] Font Awesome 5 - Inversion of the icon position
本文介绍了真棒字体5-图标位置反转的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
您知道一种可以反转图标位置的解决方案吗?
Do you know a solution to reverse the position of an icon please?
我找到了解决方案,但是我不了解其属性.
I have found a solution, however I don't understand the properties.
-webkit-transform: scaleX(-1);
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
我正在寻找简单的解决方案...
I am looking for a solution simple...
.fa{
font-size: 23px;
color: blue;
margin-right: 10px;
-webkit-transform: scaleX(-1);
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<div class="subtitle-right"><i class="fa fa-phone"></i>+(11)123 456 7890,</div>
>
推荐答案
An easy solution would be to consider the styling already provided by Font Awesome (https://fontawesome.com/how-to-use/on-the-web/styling/power-transforms)
.fa-phone{
font-size: 23px;
color: blue;
margin-right: 10px;
}
<script src="https://use.fontawesome.com/releases/v5.7.2/js/all.js"></script>
<div class="subtitle-right"><i class="fas fa-phone"></i>+(11)123 456 7890,</div>
<div class="subtitle-right"><i class="fas fa-phone" data-fa-transform="flip-h"></i>+(11)123 456 7890,</div>
这篇关于真棒字体5-图标位置反转的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文