Usage
- 登陸阿里巴巴 icon 庫 iconfont+威鹿， 找到合適的 icon
- 加入購物車吱韭，添加至我的項目
- 在我的項目頁棱烂，點『更多操作』，『編輯項目』喇伯，編輯
FontClass/Symbol 前綴選項喊儡，修改為el-icon-xx-,命名統(tǒng)一規(guī)范 - 下載至本地，解壓縮稻据，之后把以下字體文件復(fù)制到你的項目中艾猜。
iconfont.css
iconfont.eot
iconfont.svg
iconfont.ttf
iconfont.woff
編輯 iconfont.css 文件，修改 font-family 字體名稱捻悯，如 xx-iconfont匆赃，避免與默認(rèn)的字體庫發(fā)生沖突，
然后在 assets/css 目錄下新建 icon.css 文件 ,
[class*=" el-icon-xx"], [class^=el-icon-xx] {
font-family: xx-iconfont!important;
}
上面 el-icon-xx 中的 xx為你自定義的名稱
- 在
App.vue和main.js中分別引入文件今缚。
/*App.vue*/
<style>
@import "./assets/css/iconfont/iconfont.css";
</style>
/*main.js*/
import './assets/css/iconfont/iconfont.css';
最后算柳，就可以在項目中使用自定義的字體文件了。
<i :class="el-icon-xx-home"></i>
TroubleShooting
- 圖標(biāo)庫 和 圖標(biāo)顯示成小方塊?
這個可能是字體文件名稱跟原來沖突導(dǎo)致的姓言，假如我們沒有使用自定義的名稱 xx-iconfont, 而是默認(rèn)的 iconfont 瞬项，那么就可能會出現(xiàn) icon 不能正確顯示的問題。
