字體圖標(biāo)的使用
不得不說字體圖標(biāo)使用起來真的很方便憾赁，能實現(xiàn)圖片的效果污朽，但實施起來卻很方便，因為你可以把字體圖標(biāo)當(dāng)作文字一樣去隨意修改龙考，比如修改顏色蟆肆、修改大小等，都十分易于去實現(xiàn)晦款。
-
接下來就說說字體圖標(biāo)如何使用：
1炎功、打開網(wǎng)站 icomoon.io
（1）點擊右上角 Icomoon App
1.PNG
(2)選擇要使用的圖標(biāo)，點擊右下角Generate Font
2.PNG
(3)即可預(yù)覽到已選擇的圖標(biāo)柬赐，再點擊右下角Font里的download（font旁邊有設(shè)置按鈕亡问，可以設(shè)置名稱和字體支持的瀏覽器版本「厮危可自行選擇）州藕，在桌面解壓下載的文件包。
（4）找到里面的fonts文件夾酝陈。
3.PNG
（5）將fonts文件夾復(fù)制到和你正在做的網(wǎng)頁的同一個文件夾下床玻。
4.PNG
2、在style標(biāo)簽里加入這段話：
@font-face { /*聲明字體*/
font-family: 'icomoon';
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;
}
3沉帮、然后引用字體圖標(biāo)锈死。
（1）打開解壓后的文件夾贫堰，找到demo.html，打開該網(wǎng)頁待牵，復(fù)制你需要的圖標(biāo)后面的像手機(jī)一樣的標(biāo)志其屏，再粘貼到span標(biāo)簽內(nèi)。
5.png
（2）接下來就可以定義字體圖標(biāo)的屬性了缨该。
span {
font-size: 50px;
color: blue;
font-family: "icomoon";
}
Ｙ诵小！此時要注意font-family的字體名稱必須與開頭聲明里的名稱相同贰拿。
效果如下圖：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
@font-face { /*聲明字體*/
font-family: 'icomoon';
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-size: 50px;
color: blue;
font-family: "icomoon";
}
</style>
</head>
<body>
<span>?</span>
</body>
</html>
6.PNG
