Vue 第三方字體圖標(biāo)引入 Font Awesome的方法
Font Awesome
用過(guò)Bootstrap字體圖符的小伙伴肯定很熟悉字體圖符的便利,不管是在加載還是修改方面,字體圖符遠(yuǎn)遠(yuǎn)優(yōu)于圖片。但是餓了嗎封裝的Element UI提供的字體圖符少之又少,又不想用圖片,只能自己擴(kuò)展圖符咯。
Font Awesome 提供了675個(gè)可縮放的矢量圖標(biāo),可以使用CSS所提供的所有特性對(duì)它們進(jìn)行更改,包括:大小、顏色、陰影或者其它任何支持的效果。還有很多優(yōu)點(diǎn)不一一舉例,可自行查看文檔:http://fontawesome.dashgame.com/
npm 安裝 font-awesome
npm install font-awesome --save-dev1
font-awesome引入
在 mani.js 文件中引入 font-awesome
import 'font-awesome/scss/font-awesome.scss'1
然后在組件中使用即可實(shí)現(xiàn):
<span class="fa fa-camera-retro fa-lg"></span>
以上這篇Vue 第三方字體圖標(biāo)引入 Font Awesome的方法就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue中Element的table多選表格如何實(shí)現(xiàn)單選
這篇文章主要介紹了Vue中Element的table多選表格如何實(shí)現(xiàn)單選,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-07-07vue實(shí)現(xiàn)動(dòng)態(tài)列表點(diǎn)擊各行換色的方法
今天小編就為大家分享一篇vue實(shí)現(xiàn)動(dòng)態(tài)列表點(diǎn)擊各行換色的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09在 Vue 應(yīng)用中使用 Netlify 表單功能的方法詳解
Netlify 帶有內(nèi)置表單處理功能,可以用來(lái)存儲(chǔ)表單數(shù)據(jù),下載 csv 文件,同時(shí)可以在接收到新的提交時(shí)發(fā)送郵件通知或者通過(guò)配置 webhook 發(fā)送請(qǐng)求。這篇文章主要介紹了在 Vue 應(yīng)用中使用 Netlify 表單功能,需要的朋友可以參考下2019-06-06解決vue無(wú)法偵聽數(shù)組及對(duì)象屬性的變化問(wèn)題
這篇文章主要介紹了解決vue無(wú)法偵聽數(shù)組及對(duì)象屬性的變化問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07vue項(xiàng)目中使用html2canvas解決截圖不全的問(wèn)題
本文主要介紹了vue項(xiàng)目中使用html2canvas解決截圖不全的問(wèn)題2023-11-11vue 動(dòng)態(tài)添加的路由頁(yè)面刷新時(shí)失效的原因及解決方案
這篇文章主要介紹了vue動(dòng)態(tài)添加的路由頁(yè)面刷新時(shí)失效的原因及解決方案,幫助大家更好的理解和學(xué)習(xí)使用vue,感興趣的朋友可以了解下2021-02-02Vue.js?前端項(xiàng)目在常見?Web?服務(wù)器上的部署配置過(guò)程
Web服務(wù)器支持多種編程語(yǔ)言,如 PHP,JavaScript,Ruby,Python 等,并且支持動(dòng)態(tài)生成 Web 頁(yè)面,這篇文章主要介紹了Vue.js?前端項(xiàng)目在常見?Web?服務(wù)器上的部署配置,需要的朋友可以參考下2023-02-02在Vue項(xiàng)目中集成和使用Lottie動(dòng)畫庫(kù)的步驟詳解
Lottie 是一個(gè)由 Airbnb 開源的動(dòng)畫庫(kù),它允許你在 Web、iOS、Android 等平臺(tái)上使用體積小、高性能的體驗(yàn)豐富的矢量動(dòng)畫,本文將詳細(xì)介紹在 Vue 項(xiàng)目中如何集成和使用 Lottie,文中有詳細(xì)的代碼講解,需要的朋友可以參考下2023-11-11基于Vue2實(shí)現(xiàn)數(shù)字縱向滾動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了如何基于Vue2實(shí)現(xiàn)數(shù)字縱向滾動(dòng)效果,從而達(dá)到顯示計(jì)時(shí)器滾動(dòng)效果,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03