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開發(fā)中后臺系統(tǒng)復(fù)雜表單優(yōu)化技巧
這篇文章主要為大家介紹了vue開發(fā)中后臺系統(tǒng)復(fù)雜表單的優(yōu)化技巧，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
Vue3使用customRef封裝防抖函數(shù)的方法詳解
防抖函數(shù)的作用是高頻率觸發(fā)的事件,在指定的單位時間內(nèi),只響應(yīng)最后一次,如果在指定的時間內(nèi)再次觸發(fā),則重新計算時間,本文將給大家詳細的介紹一下Vue3使用customRef封裝防抖函數(shù)的方法,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了詳解Vue.js入門環(huán)境搭建，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-03-03
這篇文章主要為大家詳細介紹了Vue參數(shù)的增刪改實例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
利用vue-router實現(xiàn)二級菜單內(nèi)容轉(zhuǎn)換
這篇文章主要介紹了如何利用vue-router實現(xiàn)二級菜單內(nèi)容轉(zhuǎn)換,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
在vue中給列表中的奇數(shù)行添加class的實現(xiàn)方法
今天小編就為大家分享一篇在vue中給列表中的奇數(shù)行添加class的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue項目多環(huán)境配置(.env)的實現(xiàn)
最常見的多環(huán)境配置，就是開發(fā)環(huán)境配置,和生產(chǎn)環(huán)境配置，本文主要介紹了vue項目多環(huán)境配置的實現(xiàn)，感興趣的可以了解一下2021-07-07
這篇文章給大家分享了vue.js刪除列表中的一行的實例操作以及代碼分享，有興趣的朋友參考下。2018-06-06
Element-Plus之el-col與el-row快速布局
el-col是el-row的子元素,下面這篇文章主要給大家介紹了關(guān)于Element-Plus之el-col與el-row快速布局的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-09-09
這篇文章主要介紹了vue如何動態(tài)修改meta的title，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06