旋转 FontAwesome 的位置箭头?
Rotate FontAwesome's location arrow?
当与Bootstrap 3.x一起使用时,有没有办法旋转 FontAwesome 的位置箭头 (<i class="fa fa-location-arrow"></i>
)?我想将指针与罗盘航向对齐。
如果不行,是否还有其他可行的方法?
您可以使用 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);
}
当与Bootstrap 3.x一起使用时,有没有办法旋转 FontAwesome 的位置箭头 (<i class="fa fa-location-arrow"></i>
)?我想将指针与罗盘航向对齐。
如果不行,是否还有其他可行的方法?
您可以使用 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);
}