前提

準(zhǔn)備好自己的字體圖標(biāo)，如果自己沒(méi)法畫(huà)出字體圖標(biāo)的（比如我） 可以到阿里公開(kāi)圖標(biāo)庫(kù)公開(kāi)圖標(biāo)庫(kù) 下載。

以下我們就來(lái)演示一下這波伸手黨的操作

1：搜索圖標(biāo)

搜索圖標(biāo)

2：添加入庫(kù)

圖標(biāo)添加入庫(kù)

3：導(dǎo)出圖標(biāo)

導(dǎo)出圖標(biāo)這里選擇下載代碼

4：恭喜得到種子字體代碼一枚

原材料有了，是時(shí)候該來(lái)?xiàng)l分割線進(jìn)入正題了

正題

來(lái)，大家手摸手一起來(lái)

步驟一：Vue工程src/assets目錄下建立一個(gè)新文件夾，隨便命名 比如"custom-font"

步驟二：將iconfont.eot、iconfont.svg、iconfont.ttf、iconfont.woff四個(gè)文件扔到剛才新建的目錄下

步驟三：Vue工程src目錄下新建一個(gè)文件夾隨便命名,不過(guò)既然是全局都要用到的東西，就命名為app吧

步驟四：在剛才創(chuàng)建的app文件夾內(nèi)新建一個(gè)app.scss文件

步驟五：將剛才下載下來(lái)的iconfont.css的內(nèi)容復(fù)制到app.scss里面

是時(shí)候再來(lái)張圖了

步驟六：對(duì)以上內(nèi)容進(jìn)行修改，請(qǐng)注意修改項(xiàng)

破圖.jpg

上個(gè)破圖我怎么復(fù)制？

OKOK，代碼來(lái)了

首先

.iconfont{

......

}

替換成

[class^="el-icon-nb"], [class*=" el-icon-nb"]{

? font-family:"iconfont" !important;

? font-size: inherit;

? font-style:normal;

? -webkit-font-smoothing: antialiased;

? -moz-osx-font-smoothing: grayscale;

}

其次

@font-face下面的url請(qǐng)換成正確的路徑，比如我的就是"../assest/custom-font/"

這樣文件才能正確被引用到

然后

最底下的.icon-xxxx開(kāi)頭的全部換成你自己喜歡的，比如.el-icon-nb-eye這樣的（請(qǐng)注意跟上一步[class^="el-icon-nb"], [class*=" el-icon-nb"]的格式要一致） 然后要跟Element的圖標(biāo)庫(kù)命名區(qū)分開(kāi)，否則可能會(huì)那個(gè)啥你自己想。

接著

在main.js里面引入剛才的app.scss文件

大功告成了

最后

試一下效果吧！

像使用Element-icon一樣去使用它

好了 ?這是全部了