字體圖標(biāo)網(wǎng)站:
醉牛前端:http://f2er.club/
阿里巴巴圖標(biāo)庫(kù):http://www.iconfont.cn/
制作字體圖標(biāo)網(wǎng)站:https://icomoon.io/ (以該網(wǎng)站為例子)
-
生成字體圖標(biāo):
第一步:點(diǎn)擊右上角的紫色圖標(biāo)
第二步:直接選擇(單擊)想要的圖標(biāo) -->制作成-->字體(點(diǎn)擊右下角Grenerate Font )
第三步:或者導(dǎo)入自己的圖標(biāo)(點(diǎn)擊左上角 import incons) -->制作成-->字體
第四步:點(diǎn)擊右下角的download(下載)
第五步:解壓后苹祟,font文件夾里面的字體哩簿,就是我們想要的字體圖標(biāo)
到此我們已經(jīng)成功將圖片變成字體圖標(biāo)
-
使用字體圖標(biāo)
第一步:查看圖標(biāo)對(duì)應(yīng)的字體編碼:在demo.html文件中查看
第二步:
執(zhí)行效果:
源代碼:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* 定義一個(gè)叫做“xmg”字體摆出,引用多種字體的目的是適配各種機(jī)型 */ @font-face { font-family: 'xmg'; src: url('font/icomoon.eot') format('embedded-opentype'), url('font/icomoon.svg') format('svg'), url('font/icomoon.ttf') format('truetype'), url('font/icomoon.woff') format('woff'); } /*匹配以icon-開(kāi)頭的class*/ [class^='icon-'], /*匹配存在icon-字符串class*/ [class*='icon-']{ font-family: xmg; font-style: normal; } i::before{ content: '\e901'; } span::before{ content: '\e91a'; } div::before{ content: '\e90f'; } </style> </head> <body> <i class="icon-i">在i之前添加字體圖標(biāo)</i> <span class="icon-span">在sapn之前添加字體圖標(biāo)</span> <div class="icon-div">在div之前添加字體圖標(biāo)</div> </body> </html>
字體文件格式
eot : embedded-opentype
svg : svg
ttf : truetype
woff : woff