IconFont 圖標(biāo)
- 
                    
                    微博#icon-weibo
- 
                    
                    家#icon-home
- 
                    
                    支付寶錢包#icon-rectangle390
- 
                    
                    搜索#icon-sosuo
- 
                    
                    住宅家具#icon-ico1
- 
                    
                    齊家錢包保障#icon-qijiaqianbaobaozhang
- 
                    
                    紅旗#icon-hongqi
- 
                    
                    齊家錢包保障#icon-qijiaqianbaobaozhang1
- 
                    
                    gouwu#icon-gouwu
- 
                    
                    家庭清潔#icon-jiatingqingji
- 
                    
                    沙發(fā)#icon-shafa
- 
                    
                    收納清潔凈化#icon-shounaqingjijinghua
- 
                    
                    sousuo#icon-sousuo
- 
                    
                    沙發(fā)#icon-shafa1
- 
                    
                    sousuo#icon-iconfuben04
- 
                    
                    iconfont-5#icon-iconfont5
- 
                    
                    地址#icon-dizhi
- 
                    
                    門#icon-men
- 
                    
                    訂單#icon-dingdan
- 
                    
                    榮譽(yù)#icon-rongyu
- 
                    
                    樓梯間#icon-loutijian
- 
                    
                    家具#icon-jiaju
- 
                    
                    家具保養(yǎng)#icon-jiajubaoyang
- 
                    
                    微信#icon-icon
- 
                    
                    咨詢#icon-iconfontconsult
- 
                    
                    門#icon-mendoor13
- 
                    
                    地址#icon-map
- 
                    
                    購物車#icon-gouwuche
- 
                    
                    購物車添加#icon-gouwuchetianjia
- 
                    
                    錯(cuò)誤#icon-cuowu
- 
                    
                    二維碼#icon-erweima
- 
                    
                    聚收藏#icon-jushoucang
- 
                    
                    垃圾箱#icon-lajixiang
- 
                    
                    鏈接#icon-lianjie
- 
                    
                    鬧鐘#icon-naozhong
- 
                    
                    掃一掃#icon-saoyisao
- 
                    
                    上翻#icon-shangfan
- 
                    
                    設(shè)置#icon-shezhi
- 
                    
                    聲音#icon-shengyin
- 
                    
                    時(shí)間#icon-shijian
- 
                    
                    收貨地址#icon-shouhuodizhi
- 
                    
                    首頁#icon-shouye
- 
                    
                    刷新#icon-shuaxin
- 
                    
                    搜索#icon-sousuo2
- 
                    
                    鎖#icon-suo
- 
                    
                    提示#icon-tishi
- 
                    
                    完成#icon-wancheng
- 
                    
                    我的訂單#icon-wodedingdan
- 
                    
                    我的反饋#icon-wodefankui
- 
                    
                    我的紅包#icon-wodehongbao
- 
                    
                    我的聚劃算#icon-wodejuhuasuan
- 
                    
                    我的優(yōu)惠券#icon-wodeyouhuiquan
- 
                    
                    下翻#icon-xiafan
- 
                    
                    下拉#icon-xiala
- 
                    
                    向上箭頭#icon-xiangshangjiantou
- 
                    
                    向下箭頭#icon-xiangxiajiantou
- 
                    
                    向右箭頭#icon-xiangyoujiantou
- 
                    
                    向左箭頭#icon-xiangzuojiantou
- 
                    
                    眼睛#icon-yanjing
- 
                    
                    意見反饋#icon-yijianfankui
- 
                    
                    照相機(jī)#icon-zhaoxiangji
- 
                    
                    正確#icon-zhengque
- 
                    
                    消息中心#icon-xiaoxizhongxin
- 
                    
                    另存為#icon-lingcunwei
- 
                    
                    new#icon-new
- 
                    
                    火#icon-huo
- 
                    
                    幫助客戶累計(jì)創(chuàng)造受益#icon-bangzhukehuleijichuangzaoshouyi
- 
                    
                    樓梯#icon-louti
- 
                    
                    地址#icon-dizhi1
- 
                    
                    衣柜#icon-yg
- 
                    
                    清潔護(hù)理#icon-qingjihuli
- 
                    
                    30-1#icon-301
- 
                    
                    7#icon-7
- 
                    
                    免#icon-mian
- 
                    
                    錢幣-01#icon-qianbi01
- 
                    
                    潔凈呵護(hù)#icon-0003
- 
                    
                    電話#icon-dianhua-copy
- 
                    
                    禮物#icon-liwu
- 
                    
                    語音#icon-yuyin
- 
                    
                    設(shè)備_衣柜#icon-shebeiyigui
- 
                    
                    進(jìn)度條-錢袋#icon-jindutiaoqiandai
- 
                    
                    家具清潔#icon-jiajuqingji
- 
                    
                    桌臺#icon-1212
- 
                    
                    微信#icon-weixin
- 
                    
                    活動(dòng)#icon-huodong
- 
                    
                    美家-精品家具#icon-meijiajingpinjiaju
- 
                    
                    右#icon-youyou-copy
- 
                    
                    家電清潔#icon-jiadianqingji
- 
                    
                    訂單#icon-icondd1
- 
                    
                    集團(tuán)單位#icon-jituandanwei
- 
                    
                    電話#icon-4
- 
                    
                    精品家具#icon-jingpinjiaju
- 
                    
                    家具#icon-jiaju1
- 
                    
                    品牌購物#icon-pinpaigouwu
- 
                    
                    電話#icon-dianhua
- 
                    
                    品牌釋義#icon-02
- 
                    
                    GOUWU#icon-gouwu1
- 
                    
                    gouwu#icon-gouwu2
- 
                    
                    旗美薈-icon團(tuán)購特惠#icon-qimeihui-icontuangoutehui
- 
                    
                    旗美薈-icon限量秒殺#icon-qimeihui-iconxianliangmiaosha
- 
                    
                    右#icon-you-copy
- 
                    
                    旗美薈-icon購物車#icon-qimeihui-icongouwuche
- 
                    
                    sousuo#icon-sousuo1
- 
                    
                    錢包業(yè)務(wù)#icon-qianbaoyewu
- 
                    
                    家具#icon-jiaju2
- 
                    
                    旗美薈-icon_分銷獎(jiǎng)賞#icon-qimeihui-icon_fenxiaojiangshang
- 
                    
                    集團(tuán)研修#icon-jituanyanxiu
- 
                    
                    訂單#icon-dingdan1
- 
                    
                    節(jié)能處罰#icon-jienengchufa
- 
                    
                    合作#icon-hezuo
- 
                    
                    板式衣柜安裝#icon-banshiyiguianzhuang
- 
                    
                    活動(dòng)#icon-huodong11
- 
                    
                    家#icon-jia
- 
                    
                    視頻#icon-shipin
- 
                    
                    集團(tuán)版#icon-jituanban
- 
                    
                    購物(圓)#icon-gouwu3
- 
                    
                    微博#icon-weibo1
- 
                    
                    文化#icon-wenhua
- 
                    
                    微信 (1)#icon-weixin1
- 
                    
                    合作#icon-hezuo1
- 
                    
                    衣柜6#icon-yigui
- 
                    
                    咨詢#icon-zixun
- 
                    
                    活動(dòng)#icon-huodong1
- 
                    
                    通用#icon-icon-test
- 
                    
                    更衣柜#icon-gengyigui
- 
                    
                    金錢#icon-jinqian
- 
                    
                    家具五金#icon-jiajuwujin
- 
                    
                    節(jié)能建筑#icon-jienengjianzhu
- 
                    
                    累計(jì)節(jié)能#icon-leijijieneng
- 
                    
                    凳子#icon-dengzi
- 
                    
                    沙發(fā)#icon-shafa2
- 
                    
                    工作臺-環(huán)保圖集#icon-gongzuotai-huanbaotuji
- 
                    
                    氣象環(huán)保#icon-qxhb
- 
                    
                    解決方案03-2視頻行業(yè)-成本高#icon-chengbengao
- 
                    
                    解決方案03-1視頻行業(yè)-技術(shù)門檻#icon-jishu
- 
                    
                    解決方案03-3視頻行業(yè)-延時(shí)#icon-yanshi
- 
                    
                    智慧節(jié)能#icon-zhihuijieneng
- 
                    
                    桌子#icon-zhuozi
- 
                    
                    合作#icon-hezuo2
- 
                    
                    集團(tuán)版#icon-jituanban1
- 
                    
                    右#icon-xia
- 
                    
                    building-o#icon-building-o
- 
                    
                    cangneishicao-o#icon-cangneishicao-o
- 
                    
                    horn-o#icon-horn-o
- 
                    
                    map-2-o#icon-map--o
- 
                    
                    service-o#icon-service-o
- 
                    
                    similar-product-o#icon-similar-product-o
- 
                    
                    volumeopen-o#icon-volumeopen-o
- 
                    
                    電話#icon-dianhua-
- 
                    
                    桌椅#icon-zhuoyi
- 
                    
                    品牌02#icon-pinpai
- 
                    
                    家具入場#icon-jiajuruchang
- 
                    
                    頂部#icon-top
- 
                    
                    錢財(cái)#icon-qiancai-
- 
                    
                    咨詢#icon-zixun1
- 
                    
                    樓梯間#icon-loutijian1
- 
                    
                    錢袋#icon-qiandai
- 
                    
                    共贏#icon-gongying
- 
                    
                    發(fā)展歷程#icon-fazhanlicheng
- 
                    
                    家具建材#icon-jiajujiancai
- 
                    
                    發(fā)展歷程#icon-fazhanlicheng1
- 
                    
                    綠色環(huán)保#icon-lkingbolvsehuanbao
- 
                    
                    訂單#icon-dingdan2
- 
                    
                    微信#icon-weixin2
- 
                    
                    訂 單#icon-dingdan3
- 
                    
                    電話#icon-dianhua1
- 
                    
                    沙發(fā)#icon-shafa3
- 
                    
                    衣柜#icon-yigui1
- 
                    
                    dianhua#icon-dianhua2
- 
                    
                    錢2#icon-qian
- 
                    
                    alert#icon-alert
- 
                    
                    859格式_通用視頻#icon-webm
symbol引用
這是一種全新的使用方式,應(yīng)該說這才是未來的主流,也是平臺目前推薦的用法。相關(guān)介紹可以參考這篇文章 這種用法其實(shí)是做了一個(gè)svg的集合,與另外兩種相比具有如下特點(diǎn):
- 支持多色圖標(biāo)了,不再受單色限制。
- 通過一些技巧,支持像字體那樣,通過font-size,color來調(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)用于頁面:
<svg class="icon" aria-hidden="true">
  <use xlink:href="#icon-xxx"></use>
</svg>