在用vue-cli4創建的vue2.x項目中通過vue-fontawesome使用fontawesome5

来源:https://www.cnblogs.com/chenqiang001/archive/2020/01/11/12180142.html
-Advertisement-
Play Games

前言 本文寫於2020年1月11日,僅提供最基本的引用方法,參考fontawesome5英文官方文檔和vue-fontawesome英文官方文檔。 正文 在vue項目中使用fontawesome5圖標,不需要引入fontawesome組件,直接引入vue-fontawesome和相關組件就可以了。 ...


前言

  本文寫於2020年1月11日,僅提供最基本的引用方法,參考fontawesome5英文官方文檔和vue-fontawesome英文官方文檔。

正文

  在vue項目中使用fontawesome5圖標,不需要引入fontawesome組件,直接引入vue-fontawesome和相關組件就可以了。

第1步:npm install

  在vue項目目錄中執行下麵的安裝命令:

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

  其中:

@fortawesome/free-solid-svg-icons是solid風格圖標

@fortawesome/free-regular-svg-ico是regular風格圖標

@fortawesome/free-brands-svg-icons是品牌圖標

  這三個可以根據項目實際需要選擇性安裝,當然如果有專業版授權,也可以引入諸如@fortawesome/pro-duotone-svg-icons等專業版圖標。

第2步:import

  在項目代碼中適當的位置使用以下方式將組件引入到頁面中,vue-fontawesome官方推薦在main.js中引入(本文作者本人為了方便而在main.js同級創建了fontawesome.js文件,然後在main.js中引入fontawesome.js):

import Vue from 'vue'

import { library } from '@fortawesome/fontawesome-svg-core'
// 事實上官方不推薦使用下麵的方式將整個庫引入到項目中
import { fas } from '@fortawesome/free-solid-svg-icons'
// 如果確實需要下麵的圖標就把註釋取消
// import { far } from '@fortawesome/free-regular-svg-icons'
// import { fab } from '@fortawesome/free-brands-svg-icons'

import {
  FontAwesomeIcon,
  FontAwesomeLayers,
  FontAwesomeLayersText
} from '@fortawesome/vue-fontawesome'

// library.add與import對應
library.add(fas)
// library.add(far)
// library.add(fab)

Vue.component('font-awesome-icon', FontAwesomeIcon)
Vue.component('font-awesome-layers', FontAwesomeLayers)
Vue.component('font-awesome-layers-text', FontAwesomeLayersText)

第3步:use,禮成

  在vue組件或html文件中需要使用圖標的位置使用下麵的方式將圖標插入到文檔中(不要使用<i class=”fas fa-home”></i>這樣的方式,在vue中行不通也不建議這樣用)

<!--
icon屬性設置動態綁定(不帶冒號)時,屬性值就是圖標名稱,預設使用fas庫
-->
<font-awesome-icon icon="spinner" />
<!--
icon屬性設置動態綁定(帶冒號)時,屬性值為數組,
數組第2個元素是圖標庫,如fas、far、fab等
數組第2個元素是圖標名稱
-->
<font-awesome-icon :icon="['fas', 'angle-double-left']" />
<!--
fixed-width屬性用於讓圖標統一寬度
-->
<font-awesome-icon :icon="['fas', 'angle-double-right']" fixed-width />
<!--
通過size屬性設置圖標大小
-->
<font-awesome-icon icon="spinner" size="xs" />
<font-awesome-icon icon="spinner" size="lg" />
<font-awesome-icon icon="spinner" size="6x" />
<!--
通過rotation屬性控製圖標的呈現角度
-->
<font-awesome-icon icon="spinner" rotation="270" />
<!--
通過flip屬性控制控製圖標翻轉
-->
<font-awesome-icon icon="spinner" flip="horizontal" />
<font-awesome-icon icon="spinner" flip="vertical" />
<font-awesome-icon icon="spinner" flip="both" />
<!--
通過spin和pulse屬性讓圖標旋轉、跳動
-->
<font-awesome-icon icon="spinner" spin />
<font-awesome-icon icon="spinner" pulse />
<!-- ……不一一列舉了,更多的花樣就參考官方文檔好了 -->

後記

  事實上,vue-fontawesome的開發者不建議我們簡單粗暴的一次性把整個圖標庫引入到項目中,這樣做違背vue框架組件化開發和按需引入的原則,下麵是文檔原文:

This(Import entire styles) will add the entire brands style to your library. Be careful with this approach as it may be convenient in the beginning but your bundle size will be large. We highly recommend that you take advantage of subsetting through tree shaking.

  大概意思就是說這種引入方式雖然用起來會很方便,但是會在發佈時讓包體積很大,所以官方推薦採用組件化引用的方式。具體使用方法如下:

import { library } from '@fortawesome/fontawesome-svg-core'
import { faSpinner, faAlignLeft } from '@fortawesome/free-solid-svg-icons'

library.add(faSpinner, faAlignLeft)

  對應的vue文件或html文件寫法:

<font-awesome-icon :icon="['fas', 'spinner']" />
<font-awesome-icon :icon="['fas', 'align-left']" />

  註意到了吧,其實就是“用一個圖標便引入一個圖標”。

  好了,參考本文方法可以實現在vue前端項目中自由使用fontawesome5中的免費版本圖標,在官方文檔中可以獲得更多有用的信息。

fontawesome5官方文檔(vue.js):https://fontawesome.com/how-to-use/on-the-web/using-with/vuejs
vue-fontawesome官方文檔:https://www.npmjs.com/package/@fortawesome/vue-fontawesome

 

  希望本文可以幫助到你,也歡迎你隨時與我交流探討,我們共同進步。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 開發人員有時候使用類似下麵SQL將字元串轉換為日期時間類型,乍一看,這樣的SQL的寫法是沒有什麼問題的。但是這樣的SQL其實有時候就是一個定時炸彈,隨時可能出現問題(),下麵簡單對這種情況進行一個簡單概括。 SELECT CONVERT(DATETIME, '2020-01-13 6:46:42')... ...
  • 場景 Android中四種補間動畫。 透明度漸變動畫 旋轉動畫 縮放動畫 平移動畫 註: 博客: https://blog.csdn.net/badao_liumang_qizhi 關註公眾號 霸道的程式猿 獲取編程相關電子書、教程推送與免費下載。 實現 透明度漸變動畫 首先在佈局文件中添加一個Im ...
  • 場景 Android中的逐幀動畫,就是由連續的一張張照片組成的動畫。 效果 註: 博客: https://blog.csdn.net/badao_liumang_qizhi 關註公眾號 霸道的程式猿 獲取編程相關電子書、教程推送與免費下載。 實現 首先準備一組不同表情的照片,放在res/drawab ...
  • 如果你在2019年8月之前將Flutter添加到現有iOS項目,本文值得你一看。 在2019年7月30日,合併合併請求flutter / flutter#36793之前Flutter 1.8.4-pre.21, 將Flutter添加到現有的iOS應用程式需要更改Podfile, 併在現有Xcode項 ...
  • 1.安裝一款安卓模擬器 ​ 本例使用網易MuMu模擬器,因為目前網路上這類模擬器只有mumu的安卓版本是最新的,為6.0,安卓自帶的Virtual Device雖然有很新的版本,但如果pc配置不是很高的話還是比較卡的,不同的模擬器需要連接的埠不同,後面會用到關於端號,具體請百度。 2.設置MuMu ...
  • 插件下載地址及文檔說明 1.引入必要的js和css核心文件 <link rel="stylesheet" href="../css/cropper.css"> <script src="../js/cropper.js"></script> <script src="https://cdn.stat ...
  • 在Node.js開發中,當遇到 buffer,stream,和二進位數據處理時,你是否像我一樣,總是感到困惑?這種感覺是否會讓你認為不瞭解它們,以為它們不適合你,認為而這些是Node.js作者們的事情? 確實,這些東西可能非常令人生畏,尤其是當你在缺乏電腦底層基礎知識,進行相關的開發。 可悲的是, ...
  • 一個日曆的控制項,基於vue的,可以日曆區間選擇,可用於酒店日曆區間篩選,動手能力強,可以修改成小程式版本的,先上效果圖 裡面的顏色樣式都是可以修改的 選擇範圍效果 話不多說,直接上乾貨,代碼可以直接複製訪問 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...