blocks|key|2961268|text|FontAwesome+5之前的：|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|2961269|标准声明只包含.fa-rotate-90、.fa-rotate-180和.fa-rotate-270。但是，您可以很容易地创建自己的：|CODE|2961270|.fa-rotate-45+{
++++-webkit-transform:+rotate(45deg);
++++-moz-transform:+rotate(45deg);
++++-ms-transform:+rotate(45deg);
++++-o-transform:+rotate(45deg);
++++transform:+rotate(45deg);
}|code-block|syntax|javascript|2961271|使用FontAwesome+5的：|2961272|你可以使用所谓的“增强变换”。示例：|2961273|<i+class="fas+fa-snowman"+data-fa-transform="rotate-90">
<i+class="fas+fa-snowman"+data-fa-transform="rotate-180">
<i+class="fas+fa-snowman"+data-fa-transform="rotate-270">
<i+class="fas+fa-snowman"+data-fa-transform="rotate-30">
<i+class="fas+fa-snowman"+data-fa-transform="rotate--30">|2961274|您需要添加具有rotate-值和所需旋转度数的data-fa-transform属性。|2961275|来源：https://fontawesome.com/how-to-use/on-the-web/styling/power-transforms|2961276|entityMap|0|LINK|mutability|MUTABLE|url|https://fontawesome.com/how-to-use/on-the-web/styling/power-transforms^0|G|1|0|7|D|L|E|10|E|0|0|G|1|0|0|0|7|7|N|H|0|3|1Y|0|0^^$0|@$1|2|3|4|5|6|7|15|8|@$9|16|A|17|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|18|8|@$9|19|A|1A|B|H]|$9|1B|A|1C|B|H]|$9|1D|A|1E|B|H]]|D|@]|E|$]]|$1|I|3|J|5|K|7|1F|8|@]|D|@]|E|$L|M]]|$1|N|3|O|5|6|7|1G|8|@$9|1H|A|1I|B|C]]|D|@]|E|$]]|$1|P|3|Q|5|6|7|1J|8|@]|D|@]|E|$]]|$1|R|3|S|5|K|7|1K|8|@]|D|@]|E|$L|M]]|$1|T|3|U|5|6|7|1L|8|@$9|1M|A|1N|B|H]|$9|1O|A|1P|B|H]]|D|@]|E|$]]|$1|V|3|W|5|6|7|1Q|8|@]|D|@$9|1R|A|1S|1|1T]]|E|$]]|$1|X|3|-4|5|6|7|1U|8|@]|D|@]|E|$]]]|Y|$Z|$5|10|11|12|E|$13|14]]]]

Before FontAwesome 5:

The standard declarations just contain <code>.fa-rotate-90</code>, <code>.fa-rotate-180</code> and <code>.fa-rotate-270</code>.
However you can easily create your own:

<pre><code>.fa-rotate-45 {
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 transform: rotate(45deg);
}
</code></pre>

With FontAwesome 5:

You can use what’s so called “Power Transforms”. Example:

<pre><code>&lt;i class="fas fa-snowman" data-fa-transform="rotate-90"&gt;&lt;/i&gt;
&lt;i class="fas fa-snowman" data-fa-transform="rotate-180"&gt;&lt;/i&gt;
&lt;i class="fas fa-snowman" data-fa-transform="rotate-270"&gt;&lt;/i&gt;
&lt;i class="fas fa-snowman" data-fa-transform="rotate-30"&gt;&lt;/i&gt;
&lt;i class="fas fa-snowman" data-fa-transform="rotate--30"&gt;&lt;/i&gt;
</code></pre>

You need to add the <code>data-fa-transform</code> attribute with the value of <code>rotate-</code> and your desired rotation in degrees.

Source: <a href="https://fontawesome.com/how-to-use/on-the-web/styling/power-transforms" rel="noreferrer">https://fontawesome.com/how-to-use/on-the-web/styling/power-transforms</a>

blocks|key|158472|text|如果要旋转45度，可以使用CSS+transform属性：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|158473|.fa-rotate-45+{
++++-ms-transform:rotate(45deg);+++++/*+Internet+Explorer+9+*/
++++-webkit-transform:rotate(45deg);+/*+Chrome,+Safari,+Opera+*/
++++transform:rotate(45deg);+++++++++/*+Standard+syntax+*/
}|code-block|syntax|javascript|158474|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

If you want to rotate 45 degrees, you can use the CSS transform property:

<pre><code>.fa-rotate-45 {
 -ms-transform:rotate(45deg); /* Internet Explorer 9 */
 -webkit-transform:rotate(45deg); /* Chrome, Safari, Opera */
 transform:rotate(45deg); /* Standard syntax */
}
</code></pre>

blocks|key|158476|text|如果您使用的是Less，则可以直接使用以下混合：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|158477|.@{fa-css-prefix}-rotate-90++{+.fa-icon-rotate(90deg,+1);++}|code-block|syntax|javascript|158478|entityMap|0|LINK|mutability|MUTABLE|url|https://en.wikipedia.org/wiki/Less_%2528stylesheet_language%2529^0|7|4|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

If you use <a href="https://en.wikipedia.org/wiki/Less_%28stylesheet_language%29" rel="nofollow">Less</a> you can directly use the following mixin:

<pre><code>.@{fa-css-prefix}-rotate-90 { .fa-icon-rotate(90deg, 1); }
</code></pre>

blocks|key|2961514|text|以防其他人偶然发现这个问题并想要它，这里是我使用的SASS混音器。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2961515|@mixin+rotate($deg:+90){
++++$sDeg:+#{$deg}deg;

++++-webkit-transform:+rotate($sDeg);
++++-moz-transform:+rotate($sDeg);
++++-ms-transform:+rotate($sDeg);
++++-o-transform:+rotate($sDeg);
++++transform:+rotate($sDeg);
}|code-block|syntax|javascript|2961516|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

In case someone else stumbles upon this question and wants it here is the SASS mixin I use.

<pre><code>@mixin rotate($deg: 90){
 $sDeg: #{$deg}deg;

 -webkit-transform: rotate($sDeg);
 -moz-transform: rotate($sDeg);
 -ms-transform: rotate($sDeg);
 -o-transform: rotate($sDeg);
 transform: rotate($sDeg);
}
</code></pre>

blocks|key|157352|text|新字体-令人惊叹的v5具有Power+Transforms|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|157353|您可以通过向图标添加属性data-fa-transform来旋转任何图标|CODE|157354|<i+class="fas+fa-magic"+data-fa-transform="rotate-45">|code-block|syntax|javascript|157355|这是一个fiddle|157356|有关更多信息，请查看以下内容：Font-Awesome5+Power+Tranforms|157357|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/dt2m49vh/1/|1|https://fontawesome.com/how-to-use/on-the-web/styling/power-transforms^0|9|2|D|G|0|C|H|0|0|4|6|0|0|F|T|1|0^^$0|@$1|2|3|4|5|6|7|11|8|@$9|12|A|13|B|C]|$9|14|A|15|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|16|8|@$9|17|A|18|B|H]]|D|@]|E|$]]|$1|I|3|J|5|K|7|19|8|@]|D|@]|E|$L|M]]|$1|N|3|O|5|6|7|1A|8|@]|D|@$9|1B|A|1C|1|1D]]|E|$]]|$1|P|3|Q|5|6|7|1E|8|@]|D|@$9|1F|A|1G|1|1H]]|E|$]]|$1|R|3|-4|5|6|7|1I|8|@]|D|@]|E|$]]]|S|$T|$5|U|V|W|E|$X|Y]]|Z|$5|U|V|W|E|$X|10]]]]

New Font-Awesome v5 has Power Transforms

You can rotate any icon by adding attribute <code>data-fa-transform</code> to icon

<pre><code>&lt;i class="fas fa-magic" data-fa-transform="rotate-45"&gt;&lt;/i&gt;
</code></pre>

Here is a <a href="https://jsfiddle.net/dt2m49vh/1/" rel="noreferrer">fiddle</a>

For more information, check this out : <a href="https://fontawesome.com/how-to-use/on-the-web/styling/power-transforms" rel="noreferrer">Font-Awesome5 Power Tranforms</a>

blocks|key|2748939|text|这个很好用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2748940|<i+class="fa+fa-power-off+text-gray"+style="transform:+rotate(90deg);">|code-block|syntax|javascript|2748941|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This works perfectly
<pre><code>&lt;i class=&quot;fa fa-power-off text-gray&quot; style=&quot;transform: rotate(90deg);&quot;&gt;&lt;/i&gt;
</code></pre>

I'd like to statically rotate my font-awesome icons by 45 degrees. It says on the site that:

<blockquote>
 To arbitrarily rotate and flip icons, use the fa-rotate-* and fa-flip-* classes.
</blockquote>

However, doing

<pre><code>&lt;i class="fa fa-link fa-rotate-45" style="font-size:1.5em"&gt;&lt;/i&gt;
</code></pre>

does not work, whereas replacing <code>fa-rotate-45</code> with <code>fa-rotate-90</code> does. Does this mean that they in fact cannot rotate arbitrarily?

Statically rotate font-awesome icons

我想静态地将我的字体图标旋转45度。它在网站上说：要任意旋转和翻转图标，请使用fa- -*和fa- flip -*类。但是，执行以下操作不起作用，而用fa-rotate-90替换fa-rota...

问静态旋转字体-很棒的图标
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问静态旋转字体-很棒的图标EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问静态旋转字体-很棒的图标
EN