旋转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