vue-cli3 引入 font-awesome的操作
更新時間：2020年08月11日 08:35:24 作者：woyaoshengzhang
這篇文章主要介紹了vue-cli3 引入 font-awesome的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
在 package.json 添加
"font-awesome": "^4.7.0"
執(zhí)行 npm install
在 main.js 引入
// font
import "font-awesome/css/font-awesome.min.css"
補充知識：在Vue2.0中引入font-awesome，并在Element-ui中正確顯示font-awesome的icon
如下所示：
npm install font-awesome --save
在main.js中引入
import 'font-awesome/css/font-awesome.css'
在App.vue的
[class^="el-icon-fa"], [class*=" el-icon-fa"] {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome!important;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@import '../node_modules/font-awesome/css/font-awesome.css';
$fa-css-prefix: el-icon-fa;
正常使用
<i class="fa fa-user"></i>
<i class="fa fa-tree"></i>
<el-button icon="el-icon-fa fa-user" size="mini">用戶</el-button>
<el-button icon="el-icon-fa fa-tree" size="mini">用戶</el-button>
以上這篇vue-cli3 引入 font-awesome的操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue自定義指令中無法獲取this的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
VUE中computed 、created 、mounted的先后順序說明
這篇文章主要介紹了VUE中computed 、created 、mounted的先后順序說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
平時業(yè)務開發(fā)中用el-upload能滿足大部分場景，但是對于一些大文件的上傳時會比較慢，所以自己基于el-upload封裝了一個切片上傳組件，希望對大家有所幫助2023-03-03
在Vue中,KeepAlive組件是一種特殊的組件,用于緩存已經(jīng)渲染過的組件實例,本文主要為大家詳細介紹了KeepAlive組件的用法,需要的小伙伴可以參考下2023-09-09
vue項目中解決 IOS + H5 滑動邊界橡皮筋彈性效果(解決思路)
最近遇到一個問題，我們在企業(yè)微信中的 H5 項目中需要用到table表格（支持懶加載 上劃加載數(shù)據(jù)），但是他們在鎖頭、鎖列的情況下，依舊會出現(xiàn)邊界橡皮筋效果，這篇文章主要介紹了vue項目中解決 IOS + H5 滑動邊界橡皮筋彈性效果,需要的朋友可以參考下2023-02-02
el-table表頭根據(jù)內(nèi)容自適應完美解決表頭錯位和固定列錯位
這篇文章主要介紹了el-table表頭根據(jù)內(nèi)容自適應完美解決表頭錯位和固定列錯位,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-01-01
這篇文章主要介紹了從0搭建Vue3組件庫之如何使用Vite打包組件庫,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-03-03
使用vue-cli創(chuàng)建vue2項目的實戰(zhàn)步驟詳解
相信大部分Vue開發(fā)者都使用過vue-cli來構(gòu)建項目,它的確很方便,但對于很多初級開發(fā)者來說,還是要踩不少坑的,下面這篇文章主要給大家介紹了關(guān)于使用vue-cli創(chuàng)建vue2項目的實戰(zhàn)步驟,需要的朋友可以參考下2023-01-01
用Axios Element實現(xiàn)全局的請求loading的方法
本篇文章主要介紹了用Axios Element實現(xiàn)全局的請求loading的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
在vue-cli3.0 中使用預處理器 (Sass/Less/Stylus) 配置全局變量操作
這篇文章主要介紹了在vue-cli3.0 中使用預處理器 (Sass/Less/Stylus) 配置全局變量操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08