什么是Font Awesome
來看看下面的效果:
QQ截圖20170728105122.png
對就是前面的小圖標就是Font Awesome抓半,還可以往任何位置插入 <i class="icon-eye-open"></i> 渣淳,是不是增加了不少閱讀體驗?
怎么應用Font Awesome
首先需要引用一個css
文件
<link rel="stylesheet">
這就引用了Font Awesome召娜。怎么用纺且?很簡單的。
看fontawesome.io給的參考妻往,我選擇新浪微博圖標
3659319580.png
<i class="icon-weibo">新浪微博</i>
顯示的就是:
QQ截圖20170728105242.png
但是怎么知道icon-weibo
是微博圖標呢互艾?看這里包含了所有的圖標代碼:http://fontawesome.io/3.2.1/icons/
多么簡單
么簡單
簡單
單
這就完了?不可能讯泣!
有時我們需要放大圖標怎么辦纫普?當然也為你想到了。
<i class="icon-weibo icon-large"></i> 新浪微博
<i class="icon-weibo icon-2x"></i> 新浪微博
<i class="icon-weibo icon-3x"></i> 新浪微博
<i class="icon-weibo icon-4x"></i> 新浪微博
那效果就是這樣,完全“矢量圖”啊
QQ截圖20170728105224.png
當然Font Awesome遠不止這些功能還有旋轉(zhuǎn)昨稼、動畫甚至還可以自定義CSS节视。更多的例子可參照
http://fontawesome.io/3.2.1/examples/