css字體圖標(biāo)的實現(xiàn)
1哗蜈、首先進入??Iconfont-阿里巴巴矢量圖標(biāo)庫
2田巴、?下載后再進入創(chuàng)建字體圖標(biāo)的網(wǎng)站icomoon
第一步:點擊IcoMoon app 進入創(chuàng)建字體圖標(biāo)界面
第二步: 點擊 import icons導(dǎo)入下載的SVG文件 超歌,然后在untitled set中選中導(dǎo)入的svg文件
最后點擊generate font創(chuàng)建字體圖標(biāo)
第三步:下載生成的字體圖標(biāo)壓縮包
第四步:打開字體圖標(biāo)壓縮包中的 demo.html 文件可以看到對應(yīng)字體圖標(biāo)的實例专普,下圖紅框內(nèi)代表字體圖標(biāo)對應(yīng)的類名
第五步:在代碼中使用字體圖標(biāo)补胚,只需要把字體圖標(biāo)壓縮包中的 fonts文件夾和 style.css 文件放到同一目錄下然后在代碼中連接 style.css 文件在標(biāo)簽中使用相應(yīng)類即可
第六步:效果展示码耐,可以通過改變style.css 文件中對應(yīng)類的 color 和font-size 來改變字體圖標(biāo)的顏色和大小