IconFont 圖標
-
表情#subicon-biaoqing
-
鈴鐺#subicon-lingdang
-
星#subicon-jinlingyingcaiwangtubiao29
-
旗艦型聯(lián)營資格#subicon-zige
-
贊#subicon-zan1
-
分享#subicon-fenxiang
-
標記#subicon-open-bookmarks
-
時評/評論#subicon-shiping
-
刪除#subicon-del
-
一拍檔專區(qū)_流程03_外貿跟單#subicon-qian
-
箭頭 向右#subicon-jiantouxiangyou
-
計算機#subicon-jisuanji
-
井#subicon-jing
-
建筑#subicon-jianzhu
-
提問#subicon-icon5
-
箭頭#subicon-arrow-left-copy-copy
-
評論#subicon-pinglun-copy
-
刷新 (1)#subicon-shuaxin1
-
會計從業(yè)#subicon-kuaijicongye
-
醫(yī)藥箱#subicon-yiyaoxiang
-
收藏#subicon-shoucang
-
瀏覽量#subicon-liulanliang
-
more#subicon-more
-
message#subicon-message
-
打叉#subicon-dacha
-
tag#subicon-tag
-
查看#subicon-chakan
-
公告#subicon-gonggao
-
人#subicon-ren
-
搜索#subicon-sousuo
-
政府合作#subicon-zhengfuhezuo
-
專題練習#subicon-zhuantilianxi
-
箭頭#subicon-jiantou
-
加號#subicon-jiahao
-
退出#subicon-web-quit
-
性別#subicon-xingbie
-
箭頭#subicon-jiantoushang2
-
tag#subicon-tag1
-
圓圈#subicon-yuanquan
-
贊#subicon-zan
-
評論#subicon-pinglun
-
定位#subicon-dingwei
-
人#subicon-ren1
-
日期#subicon-riqi
-
下載#subicon-xiazai
-
收 藏#subicon-shoucang1
-
練習#subicon-lianxi
-
主頁#subicon-zhuye
-
練習#subicon-lianxi1
-
寫#subicon-xie
-
查看#subicon-view
-
性別#subicon-xingbie1
-
學歷#subicon-xueli
-
修改#subicon-xiugai
-
會計#subicon-huiji
-
簽到#subicon-sign
-
試卷#subicon-shijuan
-
課程#subicon-kecheng
-
右箭頭#subicon-zyojiantou
symbol引用
這是一種全新的使用方式,應該說這才是未來的主流,也是平臺目前推薦的用法。相關介紹可以參考這篇文章 這種用法其實是做了一個svg的集合,與另外兩種相比具有如下特點:
- 支持多色圖標了,不再受單色限制。
- 通過一些技巧,支持像字體那樣,通過
font-size
,color
來調整樣式。 - 兼容性較差,支持 ie9+,及現(xiàn)代瀏覽器。
- 瀏覽器渲染svg的性能一般,還不如png。
使用步驟如下:
第一步:引入項目下面生成的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>
第三步:挑選相應圖標并獲取類名,應用于頁面:
<svg class="icon" aria-hidden="true">
<use xlink:href="#subicon-xxx"></use>
</svg>