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

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

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

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

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


方案2：使用Symbol 引用（此方法，svg對于原圖標(biāo)有顏色的，會自動帶入顏色，同時修改不了其顏色；對于無顏色的圖標(biāo)，可修改顏色；）
步驟：1.先在app.vue下引入通用 CSS 代碼（引入一次就行）；2.在對應(yīng)頁面的下使用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的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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