字體圖標(biāo)的使用方法 ——icon-fonts
第一步：選擇所需的字體圖標(biāo)，權(quán)威字體圖標(biāo)網(wǎng)站鏈接：https://icomoon.io點(diǎn)擊打開鏈接
第二步：點(diǎn)擊網(wǎng)站右上角處的紅色按鈕icnMoon App進(jìn)行創(chuàng)建字體圖標(biāo)
第三步：我們可以直接選擇已有的圖標(biāo)蒋情，具體使用不做過(guò)多解釋他嫡，附教程鏈接http://blog.csdn.net/goodgirl1991/article/details/50416974點(diǎn)擊打開鏈接
第四步：點(diǎn)擊右上角紫色按鈕import Icons導(dǎo)入自己本地的svg
重點(diǎn)來(lái)了！
第五步：如果本地的svg資源不夠用怎么辦蠢箩？http://www.iconfont.cn點(diǎn)擊打開鏈接
如上所示：點(diǎn)擊svg下載查乒，當(dāng)然你也可以直接下載png格式，各種好處我也不多贅述
第六步：在網(wǎng)頁(yè)中如何引用icomoon生成的fonts文件
注意：壓解的icomoon文件中只需要fonts文件即可允青，可以在demo.html預(yù)覽你加入的所有字體圖標(biāo)
第七步：附上字體圖標(biāo)使用方式
css中加入
@font-face{
? ? ?font-family:'icomoon';src:url('../fonts/icomoon.eot');
? ? ?src:url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'),
? ? ?url('../fonts/icomoon.woff') format('woff'),
? ? ?url('../fonts/icomoon.ttf') format('truetype'),
? ? ?url('../fonts/icomoon.svg#icomoon') format('svg');
? ? ?font-weight:normal;font-style:normal
}
[data-icon]:before{
? ? ? font-family:'icomoon';content:attr(data-icon);
? ? ? speak:none;font-weight:normal;
? ? ? font-variant:normal;
? ? ? text-transform:none;
? ? ? line-height:1;
? ? ? -webkit-font-smoothing:antialiased
}
html中加入
<span aria-hidden="true" class="icon-newspaper si_01" data-icon="ꀃ"></span>
或
<div aria-hidden="true" class="icon-newspaper si_01" data-icon="ꀃ"></div>
或者font、i卵沉、b等標(biāo)簽
通過(guò)css樣式font-size屬性控制字體圖標(biāo)的大小颠锉，color屬性控制其顏色
只要可以用來(lái)操作字體的樣式皆可以用在字體圖標(biāo)上
