說(shuō)明：使用字體圖標(biāo)
推薦網(wǎng)站：Icon Font & SVG Icon Sets ? IcoMoon
使用步驟：
1.選擇字體圖標(biāo)
1）登錄網(wǎng)站，點(diǎn)擊所示圖標(biāo)：
2）在顯示的頁(yè)面中選擇系統(tǒng)的圖標(biāo)或者導(dǎo)入自己的圖標(biāo)（svg格式）：
選擇系統(tǒng)的圖標(biāo)
導(dǎo)入自己的圖標(biāo)（SVG格式）：
點(diǎn)擊導(dǎo)入 icon
選擇svg文件
導(dǎo)入之后并選擇自定義圖標(biāo)
2.下載文字圖標(biāo)
選擇系統(tǒng)自帶的圖標(biāo)和自定義的圖標(biāo)之后，點(diǎn)擊 Generate Font
點(diǎn)擊之后在顯示的頁(yè)面中我們可以看到我們選擇的圖標(biāo)和系統(tǒng)的圖標(biāo)都顯示出來(lái)了，此時(shí)點(diǎn)擊Download
下載的文件夾內(nèi)容如圖示：
3.引用文字圖標(biāo)
1）將download下來(lái)的fonts文件夾放到我們的業(yè)務(wù)文件夾中。
2） 將@font-face引入到代碼中，告訴別人我們自己引用的字體，并把我們的字體命名為myfont。
<style>
@font-face {
font-family: 'myfont';
src: url('fonts/icomoon.eot?7kkyc2');
src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
url('fonts/icomoon.woff?7kkyc2') format('woff'),
url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
</style>
3）給盒子使用我們的字體，并給span標(biāo)簽添加我們的字體樣式
<style>
@font-face {
font-family: 'myfont';
src: url('fonts/icomoon.eot?7kkyc2');
src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
url('fonts/icomoon.woff?7kkyc2') format('woff'),
url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
span {
font-family: myfont;
font-size: 50px;
}
</style>
<body>
<div>
<span>?</span>
</div>
</body>
其中，span中的小方塊是從demo.html中復(fù)制的，復(fù)制步驟如下：
從下載的文件夾在找到demo.html文件
打開(kāi)demo.html，并復(fù)制對(duì)應(yīng)圖標(biāo)中的小方塊（紅色箭頭所指的方塊），并將小方塊放入span標(biāo)簽中：
最后打開(kāi)我們的html文件：可以看到我們已經(jīng)成功使用了文字圖標(biāo)
4.追加文字圖標(biāo)
其實(shí)很多時(shí)候我們使用的圖標(biāo)不是一次就能選擇完的，有時(shí)候還要往下載的fonts中追加一些問(wèn)題圖標(biāo)，那如何追加呢？
1）導(dǎo)入json文件
在網(wǎng)站中導(dǎo)入我們上次下載的selection.json文件
選擇YES
2）可以看到網(wǎng)站中已經(jīng)有我們的選擇的一些文字圖標(biāo)了
3）此時(shí)我們可以追加一些想要的文字圖標(biāo)，并下載下來(lái)，替換我們上次下載的文件夾即可，就能實(shí)現(xiàn)問(wèn)題圖標(biāo)的追加。
注意：
使用時(shí)，要在我們的文件夾中用新的下載的fonts文件夾，替換我們上一次下載的fonts文件夾。
