vue配置font-awesome5

melody_lql 發布于2019-08-23 14:58 / 1256人閱讀

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

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

1、安裝fontawesome基礎配置

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頁面使用

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

上面這些是使用font-awesome 5.0.13

對于5.6.3版本來說，因為新增加了Font Awesome SVG Core.所以5.6.3的安裝:
1、安裝fontawesome基礎配置

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的這兩項在5.6.3版本中尚不知道不用pro該怎么安裝，求大佬補充

GPU云服務器云服務器 font-awesome php-5.6配置 tomcat8.5配置 php5.5編譯配置

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/101420.html

Vue入坑筆記

摘要：近段時間常使用開發，寫點記錄，避免時間久之忘了。安裝教程查看是否已安裝，在中輸入若已安裝則輸出版本號。繼承報錯可能是文件路徑問題。當和繼承的不同時在文件夾內外的話，會出現該錯誤。近段時間常使用vue-cli開發，寫點記錄，避免時間久之忘了。環境 1. nodejs　　vue-cli開發基于nodejs環境，確保開發的環境中已安裝了nodejs。　　安裝教程 https://www....

superw 2019-08-26 12:16 評論0 收藏0
一款基于vue好用的富文本編輯器Froala WYSIWYG Editor

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

adam1q84 2019-08-23 12:12 評論0 收藏0
vue-cli配置webpack dll

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

justCoding 2019-08-20 17:18 評論0 收藏0
vue 2.0 使用 Font Awesome

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

raise_yang 2019-08-23 15:28 評論0 收藏0
vue 2.0 使用 Font Awesome

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

asoren 2019-08-02 14:20 評論0 收藏0