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"
補(bǔ)充知識(shí)：在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的操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
- 超詳細(xì)動(dòng)手搭建一個(gè)VuePress 站點(diǎn)及開啟PWA與自動(dòng)部署的方法
- vue引入Excel表格插件的方法
- Vue中引入svg圖標(biāo)的兩種方式
- Vue項(xiàng)目如何引入bootstrap、elementUI、echarts
- 如何在vue 中引入使用jquery
- Vue-cli4 配置 element-ui 按需引入操作
- vue 項(xiàng)目引入echarts 添加點(diǎn)擊事件操作
- vue頁(yè)面引入three.js實(shí)現(xiàn)3d動(dòng)畫場(chǎng)景操作
- 使用vue引入maptalks地圖及聚合效果的實(shí)現(xiàn)
- 淺談在vue-cli3項(xiàng)目中解決動(dòng)態(tài)引入圖片img404的問題
- Vue項(xiàng)目引入PWA的步驟
相關(guān)文章
這篇文章主要介紹了Vue自定義指令中無法獲取this的問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
VUE中computed 、created 、mounted的先后順序說明
這篇文章主要介紹了VUE中computed 、created 、mounted的先后順序說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
Vue實(shí)現(xiàn)封裝一個(gè)切片上傳組件
平時(shí)業(yè)務(wù)開發(fā)中用el-upload能滿足大部分場(chǎng)景，但是對(duì)于一些大文件的上傳時(shí)會(huì)比較慢，所以自己基于el-upload封裝了一個(gè)切片上傳組件，希望對(duì)大家有所幫助2023-03-03
詳解如何優(yōu)雅運(yùn)用Vue中的KeepAlive組件
在Vue中,KeepAlive組件是一種特殊的組件,用于緩存已經(jīng)渲染過的組件實(shí)例,本文主要為大家詳細(xì)介紹了KeepAlive組件的用法,需要的小伙伴可以參考下2023-09-09
vue項(xiàng)目中解決 IOS + H5 滑動(dòng)邊界橡皮筋彈性效果(解決思路)
最近遇到一個(gè)問題，我們?cè)谄髽I(yè)微信中的 H5 項(xiàng)目中需要用到table表格（支持懶加載 上劃加載數(shù)據(jù)），但是他們?cè)阪i頭、鎖列的情況下，依舊會(huì)出現(xiàn)邊界橡皮筋效果，這篇文章主要介紹了vue項(xiàng)目中解決 IOS + H5 滑動(dòng)邊界橡皮筋彈性效果,需要的朋友可以參考下2023-02-02
el-table表頭根據(jù)內(nèi)容自適應(yīng)完美解決表頭錯(cuò)位和固定列錯(cuò)位
這篇文章主要介紹了el-table表頭根據(jù)內(nèi)容自適應(yīng)完美解決表頭錯(cuò)位和固定列錯(cuò)位,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
從0搭建Vue3組件庫(kù)之如何使用Vite打包組件庫(kù)
這篇文章主要介紹了從0搭建Vue3組件庫(kù)之如何使用Vite打包組件庫(kù),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-03-03
使用vue-cli創(chuàng)建vue2項(xiàng)目的實(shí)戰(zhàn)步驟詳解
相信大部分Vue開發(fā)者都使用過vue-cli來構(gòu)建項(xiàng)目,它的確很方便,但對(duì)于很多初級(jí)開發(fā)者來說,還是要踩不少坑的,下面這篇文章主要給大家介紹了關(guān)于使用vue-cli創(chuàng)建vue2項(xiàng)目的實(shí)戰(zhàn)步驟,需要的朋友可以參考下2023-01-01
用Axios Element實(shí)現(xiàn)全局的請(qǐng)求loading的方法
本篇文章主要介紹了用Axios Element實(shí)現(xiàn)全局的請(qǐng)求loading的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03
在vue-cli3.0 中使用預(yù)處理器 (Sass/Less/Stylus) 配置全局變量操作
這篇文章主要介紹了在vue-cli3.0 中使用預(yù)處理器 (Sass/Less/Stylus) 配置全局變量操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08