成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

vue配置font-awesome5

melody_lql / 1288人閱讀

摘要：的配置就暫且不說，主要是之后的的配置安裝基礎(chǔ)配置安裝樣式依賴或者兩步合一在中配置在頁面使用當(dāng)然并非一定要寫成標(biāo)簽，它只是組件與里面的對照，的只是將其作為全局組件。

vue的配置就暫且不說，主要是之后的font-awesome5的配置：

1、安裝fontawesome基礎(chǔ)配置

npm i --save @fortawesome/fontawesome
npm i --save @fortawesome/vue-fontawesome

2、安裝fontawesome樣式依賴

npm i --save @forawesome/fontawesome-free-solid
npm i --save @forawesome/fontawesome-free-regular
npm i --save @fortawesome/fontawesome-free-brands

或者兩步合一

npm i --save @fortawesome/fontawesome @fortawesome/vue-fontawesome @forawesome/fontawesome-free-solid @forawesome/fontawesome-free-regular @fortawesome/fontawesome-free-brands


3、在main.js中配置font-awesome

import fontawesome from "@fortawesome/fontawesome"
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"
import solid from "@fortawesome/fontawesome-free-solid"
import regular from "@fortawesome/fontawesome-free-regular"
import brands from "@fortawesome/fontawesome-free-brands"
fontawesome.library.add(solid)
fontawesome.library.add(regular)
fontawesome.library.add(brands)
Vue.component("font-awesome-icon", FontAwesomeIcon)


4、在vue頁面使用

當(dāng)然并非一定要寫成font-awesome-icon標(biāo)簽，它只是組件與main.js里面的Vue.component對照，main.js的Vue.component只是將其作為全局組件。在:icon="["樣式","省去樣式前綴的圖表名"]"，


上面這些是使用font-awesome 5.0.13

對于5.6.3版本來說，因?yàn)樾略黾恿薋ont Awesome SVG Core.所以5.6.3的安裝:
1、安裝fontawesome基礎(chǔ)配置

npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/vue-fontawesome

2、在main.js中配置font-awesome

import { library } from "@fortawesome/fontawesome-svg-core"
import { fas } from "@fortawesome/free-solid-svg-icons"
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"
library.add(fas)
Vue.component("font-awesome-icon", FontAwesomeIcon)

3、在頁面中可以寫入

或

對于非fas的可以直接寫

還剩下fal和fab的這兩項(xiàng)在5.6.3版本中尚不知道不用pro該怎么安裝，求大佬補(bǔ)充

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/101420.html

相關(guān)文章

  • Vue入坑筆記

    摘要：近段時(shí)間常使用開發(fā)，寫點(diǎn)記錄，避免時(shí)間久之忘了。安裝教程查看是否已安裝，在中輸入若已安裝則輸出版本號。繼承報(bào)錯(cuò)可能是文件路徑問題。當(dāng)和繼承的不同時(shí)在文件夾內(nèi)外的話，會(huì)出現(xiàn)該錯(cuò)誤。 近段時(shí)間常使用vue-cli開發(fā)，寫點(diǎn)記錄，避免時(shí)間久之忘了。 環(huán)境 1. nodejs　　vue-cli開發(fā)基于nodejs環(huán)境，確保開發(fā)的環(huán)境中已安裝了nodejs?！　“惭b教程 https://www....

    superw 評論0 收藏0

  • 一款基于vue好用的富文本編輯器Froala WYSIWYG Editor

    摘要：前言基于使用過幾款富文本編輯器趟過坑，但是這幾款總感覺不是那么適合項(xiàng)目需求，苦苦搜尋總算找到一款好用的富文本編輯器支持特性快速預(yù)覽使用廢話不多說，開始擼代碼安裝引入引入引入中文語言包引入此處可在中引入地址 前言： 基于Vue使用過幾款富文本編輯器：wangEditorvue-quill-editorvue2-editor 趟過坑，但是這幾款總感覺不是那么適合項(xiàng)目需求，苦苦搜尋總算找到一...

    adam1q84 評論0 收藏0

  • vue-cli配置webpack dll

    摘要：一緩存失效改變了的一點(diǎn)兒代碼，打包的就會(huì)改變導(dǎo)致每次發(fā)布，的緩存都會(huì)失效。為了解決上述問題，在網(wǎng)上查找資料后，找到使用這個(gè)方案。三對比結(jié)果優(yōu)化前筆記本上打包時(shí)間為，優(yōu)化后筆記本打包時(shí)間為，同時(shí)也增加了這些庫的緩存。 問題 在前端項(xiàng)目中，我們希望第三方庫（vendors）和自己寫的代碼可以分開打包，vue-cli也幫我們配好了webpack的CommonsChunkPlugin，但是在使...

    justCoding 評論0 收藏0

  • vue 2.0 使用 Font Awesome

    摘要：只需要兩步，親測有效下載依賴在入口文件全局引入在測試實(shí)例效果圖 只需要兩步，親測有效 下載依賴font awesome npm/cnpm install font-awesome --save 在入口文件main.js全局引入 import font-awesome/css/font-awesome.min.css 在App.vue測試 實(shí)例效果圖： showImg(htt...

    raise_yang 評論0 收藏0

  • vue 2.0 使用 Font Awesome

    摘要：只需要兩步，親測有效下載依賴在入口文件全局引入在測試實(shí)例效果圖 只需要兩步，親測有效 下載依賴font awesome npm/cnpm install font-awesome --save 在入口文件main.js全局引入 import font-awesome/css/font-awesome.min.css 在App.vue測試 實(shí)例效果圖： showImg(htt...

    asoren 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<