有关字体图标的一些用法

字体图标是可以当文字一样改变其颜色和尺寸大小的。
fa-inverse 是切换图标颜色,黑变白,白变黑。
<span class="fa fa-car myCar"></span>
<p>我有一个iphone<span class="fa fa-phone "></span>&#9660;</p>
<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-car fa-spin"></i>
<!-- 定宽-->
<div class="list">
<a href="#"><i class="fa fa-car fa-fw">&nbsp;ome</i></a>
<a href="#"><i class="fa fa-home fa-fw"></i></a>
<a href="#"><i class="fa fa-book fa-fw"></i></a>
<a href="#"><i class="fa fa-pencil fa-fw"></i></a>
</div>
<!--利用fa-ul ,fa-li可以将无序列表的默认符号替换掉-->
<ol class="fa-ol">
`<li><i class="fa-li fa fa-check-square"></i>List icons</li>
`<li><i class="fa-li fa fa-check-square"></i>can be used</li>
`<li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
`<li><i class="fa-li fa fa-square"></i>in lists</li>
</ol>
<!--边框 对齐-->
<i class="fa fa-quote-left fa-2x pull-right fa-border"></i>
...tomorrow we will run faster, stretch out our arms farther...
And then one fine morning— So we beat on, boats against the
current, borne back ceaselessly into the past.
<!--旋转和翻转-->
<i class="fa fa-shield"></i> normal<br>
<i class="fa fa-home fa-rotate-90"></i> fa-rotate-90<br>
<i class="fa fa-shield fa-rotate-180"></i> fa-rotate-180<br>
<i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270<br>
<i class="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal<br>
<i class="fa fa-shield fa-flip-vertical"></i> icon-flip-vertical
<!--多图标组合使用-->
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>
posted @ 2017-03-13 21:00  大头婧  阅读(426)  评论(0)    收藏  举报