vue-cli3 引入 font-awesome的操作

更新時(shí)間：2020年08月11日 08:35:24 作者：woyaoshengzhang

這篇文章主要介紹了vue-cli3 引入 font-awesome的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

在 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è)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

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