直接將icon下載成圖片使用，看此篇

一、登入阿里字體圖標(biāo)庫(kù)
選擇圖標(biāo)加入購(gòu)物車
下載代碼：
解壓后，將除了html的文件都復(fù)制一份到自己項(xiàng)目assets下：

二、點(diǎn)擊打開(kāi)之前解壓的html文件
推薦使用Font class引入字體圖標(biāo)：

三、main.sj下引入字體圖標(biāo)樣式：

四、按照html的方法使用：
方案1：通過(guò)Font class引入字體圖標(biāo)，類名修改字體圖標(biāo)的大小和顏色（推薦此方法：可改變圖標(biāo)大小和顏色）
步驟：1.先使用<span class="iconfont icon-類名"></span>引入；2.再通過(guò)對(duì)應(yīng)class類名修改css樣式；


方案2：使用Symbol 引用（此方法，svg對(duì)于原圖標(biāo)有顏色的，會(huì)自動(dòng)帶入顏色，同時(shí)修改不了其顏色；對(duì)于無(wú)顏色的圖標(biāo)，可修改顏色；）
步驟：1.先在app.vue下引入通用 CSS 代碼（引入一次就行）；2.在對(duì)應(yīng)頁(yè)面的下使用svg引入圖標(biāo)；3.添加類名修改圖標(biāo)樣式

通用 CSS 代碼：

<style> .icon {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden; } </style>

svg代碼：

<svg class="icon" aria-hidden="true"><use xlink:href="#icon-類名"></use> </svg>

總結(jié)

以上是生活随笔為你收集整理的vue项目引入字体图标iconfont的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。