旋转 FontAwesome 的位置箭头？

Question

当与Bootstrap 3.x一起使用时，有没有办法旋转 FontAwesome 的位置箭头 (<i class="fa fa-location-arrow"></i>)？我想将指针与罗盘航向对齐。

如果不行，是否还有其他可行的方法？

Answer 1

您可以使用 FontAwesome 的内置旋转类:

<i class="fa fa-location-arrow"></i> normal<br>
<i class="fa fa-location-arrow fa-rotate-90"></i> fa-rotate-90<br>
<i class="fa fa-location-arrow fa-rotate-180"></i> fa-rotate-180<br>
<i class="fa fa-location-arrow fa-rotate-270"></i> fa-rotate-270<br>

如果需要更精确的旋转，可以使用CSS变换：

.rotate-arrow-n{
    -ms-transform: rotate(-45deg); /* IE 9 */
    -webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
    transform: rotate(-45deg);
}

JSFiddle

旋转 FontAwesome 的位置箭头？

Rotate FontAwesome's location arrow?

twitter-bootstrap

twitter-bootstrap-3

font-awesome