在vue-cli的組件模板里使用font-awesome的兩種方法

更新時(shí)間：2018年09月28日 09:33:21 作者：夏天的風(fēng)歐陽(yáng)冰嫣

今天小編就為大家分享一篇在vue-cli的組件模板里使用font-awesome的兩種方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

方法一：

npm install font-awesome

在main.js里添加import 'font-awesome/css/font-awesome.css'

方法二：

在官網(wǎng)下載代碼到本地，現(xiàn)在應(yīng)該是font-awesome-4.7，把整個(gè)文件夾放到static文件夾中，然后在index.html中加上<link

rel="stylesheet" href="/static/font-awesome-4.7/css/font-awesome.min.css" rel="external nofollow" >，應(yīng)該就可以了。

使用方法：<i class="fa fa-home fa-lg"> 主頁(yè)</i>

以上這篇在vue-cli的組件模板里使用font-awesome的兩種方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue組件實(shí)現(xiàn)旋轉(zhuǎn)木馬動(dòng)畫(huà)
這篇文章主要為大家詳細(xì)介紹了Vue組件實(shí)現(xiàn)旋轉(zhuǎn)木馬動(dòng)畫(huà)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-07-07
vue項(xiàng)目運(yùn)行時(shí)出現(xiàn)It works的問(wèn)題解決
本文主要介紹了vue項(xiàng)目運(yùn)行時(shí)出現(xiàn)It works的問(wèn)題解決，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-07-07
Vue如何給組件添加點(diǎn)擊事件?@click.native
這篇文章主要介紹了Vue如何給組件添加點(diǎn)擊事件?@click.native，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
Vue中computed和watch有哪些區(qū)別
這篇文章主要介紹了Vue中computed和watch有哪些區(qū)別，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下
2020-12-12
Vue3.0之引入Element-plus ui樣式的兩種方法
本文主要介紹了Vue3.0之引入Element-plus ui樣式的兩種方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-02-02
vue關(guān)于重置表單數(shù)據(jù)出現(xiàn)undefined的解決
這篇文章主要介紹了vue關(guān)于重置表單數(shù)據(jù)出現(xiàn)undefined的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
vue倒計(jì)時(shí)刷新頁(yè)面不會(huì)從頭開(kāi)始的解決方法
在本篇文章里小編給大家整理的是關(guān)于vue倒計(jì)時(shí)刷新頁(yè)面不會(huì)從頭開(kāi)始的解決方法，需要的朋友們參考下。
2020-03-03
vue.js實(shí)現(xiàn)照片放大功能
這篇文章主要為大家詳細(xì)介紹了vue.js實(shí)現(xiàn)照片放大功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-06-06
vue2之jessibuca視頻插件使用教程詳細(xì)講解
Jessibuca進(jìn)行直播流播放,為用戶帶來(lái)便捷、高效的視頻觀看體驗(yàn),下面這篇文章主要給大家介紹了關(guān)于vue2之jessibuca視頻插件使用的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下
2024-09-09
vue中使用echarts并根據(jù)選擇條件動(dòng)態(tài)展示echarts圖表
雖然老早就看過(guò)很多echarts的例子, 但自己接觸的項(xiàng)目中一直都沒(méi)有真正用到過(guò),直到最近才開(kāi)始真正使用,下面這篇文章主要給大家介紹了關(guān)于vue中使用echarts并根據(jù)選擇條件動(dòng)態(tài)展示echarts圖表的相關(guān)資料,需要的朋友可以參考下
2023-12-12