#css #font-awesome #font-awesome-5
#css #шрифт-awesome #шрифт-awesome-5
Вопрос:
Не знаете ли вы, пожалуйста, как изменить положение значка на противоположное?
Я нашел решение, однако я не понимаю свойств.
-webkit-transform: scaleX(-1);
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
Я ищу простое решение…
.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>
Комментарии:
1. все, что вам нужно, это это
transform: scaleX(-1);
вы можете удалить другой
Ответ №1:
Простым решением было бы рассмотреть стиль, уже предоставленный 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>
Ответ №2:
Если вы хотите отразить значок, это должно просто сработать
transform: scaleX(-1);