IconFont 圖標(biāo)
-
鈴鐺#icon-lingdang
-
星#icon-jinlingyingcaiwangtubiao29
-
提問(wèn)#icon-icon5
-
箭頭#icon-arrow-left-copy-copy
-
查看#icon-chakan
-
公告#icon-gonggao
-
人#icon-ren
-
性別#icon-xingbie
-
圓圈#icon-yuanquan
-
評(píng)論#icon-pinglun
-
日期#icon-riqi
-
下載#icon-xiazai
-
寫(xiě)#icon-xie
-
查看#icon-view
-
性別#icon-xingbie1
symbol引用
這是一種全新的使用方式，應(yīng)該說(shuō)這才是未來(lái)的主流，也是平臺(tái)目前推薦的用法。相關(guān)介紹可以參考這篇文章 這種用法其實(shí)是做了一個(gè)svg的集合，與另外兩種相比具有如下特點(diǎn)：
- 支持多色圖標(biāo)了，不再受單色限制。
- 通過(guò)一些技巧，支持像字體那樣，通過(guò)
font-size,color來(lái)調(diào)整樣式。 - 兼容性較差，支持 ie9+,及現(xiàn)代瀏覽器。
- 瀏覽器渲染svg的性能一般，還不如png。
使用步驟如下：
第一步：引入項(xiàng)目下面生成的symbol代碼：
<script src="./iconfont.js"></script>第二步：加入通用css代碼（引入一次就行）：
<style type="text/css">
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>第三步：挑選相應(yīng)圖標(biāo)并獲取類名，應(yīng)用于頁(yè)面：
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xxx"></use>
</svg>