vue element項目引入icon圖標(biāo)的方法
更新時間：2018年06月06日 09:54:49 作者：bhq1711617151
這篇文章主要介紹了vue element項目引入icon圖標(biāo)的方法,本文圖文并茂給大家介紹的非常詳細(xì)，需要的朋友可以參考下
為了減少頁面的加載速度,提高用戶體驗,對于一些圖片決定使用圖標(biāo)代替,但是發(fā)現(xiàn)element-ui的圖標(biāo)少得可憐,完全滿足不了我的要求,于是決定在element-ui的項目里引入第三方的圖標(biāo)庫.
因為阿里巴巴海量的圖標(biāo),所以決定引入阿里巴巴的圖標(biāo)庫
阿里巴巴圖標(biāo)網(wǎng)站: http://www.iconfont.cn/
下面具體介紹如何使用
1.注冊一個阿里巴巴賬號,搜索自己需要的圖標(biāo),添加到購物車,然后點擊添加到項目,如果沒有項目就需要創(chuàng)建.
2.點擊添加到項目后,選中第二個
3.點擊更多操作里面的編輯,注意前綴的設(shè)置，后面的命名不能和element里面的發(fā)生沖突
4.設(shè)置后保存代碼到本地,然后解壓到項目里,并對里面的iconfont.css文件進行修改
5.在iconfont.css進行修改,在文件里添加如下代碼
[class^="el-icon-ump"], [class*=" el-icon-ump"] {
font-family:"fontFamily" !important;
/* 以下內(nèi)容參照第三方圖標(biāo)庫本身的規(guī)則 */
font-size: 18px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
6.添加之后在main.js引入圖標(biāo)
import "./assets/icon/iconfont.css";
7.在你需要引入圖標(biāo)的地方直接使用即可.
總結(jié)
以上所述是小編給大家介紹的vue element項目引入icon圖標(biāo)的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue登錄頁面設(shè)置驗證碼input框的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了vue2和vue3的區(qū)別,較為詳細(xì)的分析了vue2與vue3的常見區(qū)別與使用方法,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了vue-cli 3.0 引入mint-ui報錯問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
使用Element-UI的NavMenu如何隱藏自帶的小箭頭
這篇文章主要介紹了使用Element-UI的NavMenu如何隱藏自帶的小箭頭問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要為大家詳細(xì)介紹了vue滑動解鎖組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
詳解本地Vue項目請求本地Node.js服務(wù)器的配置方法
本文只針對自己需要本地模擬接口于是搭建一個本地node服務(wù)器供自己測試使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-03-03
網(wǎng)頁中滑動圖片驗證一直是各大網(wǎng)站、移動端的主流校驗方式，其主要作用是為了區(qū)分人和機器以及為了防止機器人程序暴力登錄或攻擊從而設(shè)置的一種安全保護方式，這篇文章主要介紹了vue?實現(xiàn)左滑圖片驗證,需要的朋友可以參考下2023-04-04
Vue向下滾動加載更多數(shù)據(jù)scroll案例詳解
這篇文章主要介紹了Vue向下滾動加載更多數(shù)據(jù)scroll案例詳解,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-08-08
這篇文章主要介紹了Vue父子模版?zhèn)髦导敖M件傳值的三種方法,需要的朋友可以參考下2017-11-11
這篇文章主要介紹了vue中js判斷長時間不操作界面自動退出登錄,本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2020-01-01