在線iconfont的使用
在這里我還是分三種情況介紹
1.Unicode?
這種方法下的在線引用首先還是要去阿里巴巴iconfont圖標庫里下載圖標文件
解壓后片择,有很多的文件捞镰,這次我們不需要全部引用与帆,只需要引用iconfont.css
在編輯器中打開這個iconfont.css文件,然后我們看到了如下情況:
我們去iconfont圖標庫里找到Unicode下的?查看在線鏈接?點此復制之后去項目里找到如上圖所示的@font-face{.......}然后進行替換办陷,注意還要將替換的路徑加上http:才會生效哦琅轧!如下圖:
之后我們在html文件里正常使用即可。
<span class="iconfont-2018"></span>
2.Font class?
font-class這種方法是直接引用線上的iconfont鏈接搭伤。
也是同樣的方法去iconfont圖標庫里復制鏈接
再去html里link引入即可害捕。
之后也是和之前相同的使用:
<span class="iconfont-2018? icon-2018-pc"></span>
3.Symbol?
這種方法是直接引用線上的iconfont鏈接。
也是同樣的方法去iconfont圖標庫里復制鏈接闷畸,注意此處的iconfont鏈接.js
所以在html里用script引入尝盼。
之后也是和之前相同的使用:
<svg class="icon" aria-hidden="true">
? ? ? ? <use xlink:href="#icon-2018-tu"></use>
?</svg>
在使用symbol方式的時候還是可以使用彩色的圖標。
在使用這些在線的圖標庫鏈接時佑菩,如果圖標庫有更新時盾沫,需要時時更新這些引用的鏈接,以此來保證圖標的正常使用哦殿漠!