欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue項(xiàng)目中使用fontawesome圖標(biāo)庫的方法

 更新時(shí)間：2023年12月27日 10:10:25   作者：淋雪小新  
fontawesome的圖標(biāo)有免費(fèi)版和專業(yè)版,本文主要使用free版本,一般free版本的圖標(biāo)夠用,free圖標(biāo)又劃分為三個(gè)圖標(biāo)庫,主要有實(shí)心圖標(biāo)solid、常規(guī)圖標(biāo)regular及品牌圖標(biāo)brand,根據(jù)需求去下載對(duì)應(yīng)的圖標(biāo)庫,無須全部下載,對(duì)vue?fontawesome圖標(biāo)庫相關(guān)知識(shí)感興趣的朋友一起看看吧

Vue項(xiàng)目中使用fontawesome圖標(biāo)庫的方法

官方文檔https://fontawesome.com.cn/

Font Awesome

1. 使用npm安裝核心包，它包含了讓圖標(biāo)工作的所有實(shí)用工具

npm i --save @fortawesome/fontawesome-svg-core

2. 安裝vue-fontawesome組件庫，Vue2.x和Vue3.x稍微有所不同

# Vue2.x
npm i --save @fortawesome/vue-fontawesome@latest-2
# Vue3.x
npm i --save @fortawesome/vue-fontawesome@latest-3

3. 以上環(huán)境安裝完成后，開始安裝所需要的圖標(biāo)庫

fontawesome的圖標(biāo)有免費(fèi)版和專業(yè)版，本文主要使用的是free版本，一般free版本的圖標(biāo)足夠用了，free圖標(biāo)又劃分為三個(gè)圖標(biāo)庫，主要有實(shí)心圖標(biāo)（solid）、常規(guī)圖標(biāo)（regular）以及品牌圖標(biāo)（brand），根據(jù)需求去下載對(duì)應(yīng)的圖標(biāo)庫，無須全部下載

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

4.Vue項(xiàng)目中導(dǎo)入整個(gè)樣式

fontawesome的圖標(biāo)也是分為全部導(dǎo)入和按需導(dǎo)入，如果您在一種樣式中使用大量圖標(biāo)，則可以導(dǎo)入整個(gè)樣式 - 但不推薦，因?yàn)樗赡苁菙?shù)千個(gè)圖標(biāo)。導(dǎo)入方法：在src/main.js或src/main.ts文件中導(dǎo)入fontawesome的內(nèi)核、組件以及剛才所下載的圖標(biāo)庫，

/* import the fontawesome core */
import { library } from '@fortawesome/fontawesome-svg-core'
/* import font awesome icon component */
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
/* import all icons, solid圖標(biāo)庫的包名為fas、regular圖標(biāo)庫的包名為far、brands圖標(biāo)庫的包名為fab */
import { fas } from '@fortawesome/free-solid-svg-icons'
// import { far } from '@fortawesome/free-regular-svg-icons'
// import { fab } from '@fortawesome/free-brands-svg-icons'
/* add icons to the library */
library.add(fas)
/* add font awesome icon component */
Vue.component('font-awesome-icon', FontAwesomeIcon)

現(xiàn)在，你可以在Vue項(xiàng)目的任何組件中使用fontawesome, fontawesome提供的是矢量圖標(biāo)，你可對(duì)圖標(biāo)樣式進(jìn)行改寫, 下面的代碼中我導(dǎo)入的是brands圖標(biāo)

<template>
  <div class="brand-icon">
    <a><font-awesome-icon icon="fa-brands fa-qq"/></a>
    <a><font-awesome-icon icon="fa-brands fa-weixin"/></a>
    <a><font-awesome-icon icon="fa-brands fa-github"/></a>
  </div>
</template>
<script>
export default {
}
</script>
<style scoped>
.brand-icon {
  display: flex;
  justify-content: center;
}
.brand-icon a {
  height: 46px;
  width: 46px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0.45rem;
  color: #ceb4b4;
  background-color: #257979;
  border-radius: 50%;
  border: 1px solid #333;
  text-decoration: none;
  font-size: 1.1rem;
  transition: 0.3s;
}
</style>

5.Vue組件中按需導(dǎo)入

如果你在項(xiàng)目中用到的圖標(biāo)較少，并且希望在打包的時(shí)候不占用資源，那么你可以按需導(dǎo)入，你應(yīng)該所使用圖標(biāo)的組件中這樣寫

import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faWeixin, faQq, faGithub } from '@fortawesome/free-brands-svg-icons'
library.add(faWeixin, faQq, faGithub)
export default {
  name: 'components',
  components: {
    FontAwesomeIcon
  }
}

導(dǎo)入對(duì)應(yīng)的圖標(biāo)后，添加到library中，并注冊(cè)組件即可使用導(dǎo)入的圖標(biāo)了, 使用方法一樣

<div class="other-login">
  <a><font-awesome-icon icon="fa-brands fa-qq"/></a>
  <a><font-awesome-icon icon="fa-brands fa-weixin"/></a>
  <a><font-awesome-icon icon="fa-brands fa-github"/></a>
</div>

在這里插入圖片描述

6.如何查詢所需要的圖標(biāo)

進(jìn)入官網(wǎng)后，點(diǎn)擊導(dǎo)航欄的搜索圖標(biāo)，輸入制定圖標(biāo)名稱，注意搜索內(nèi)容僅支持英文檢索

在這里插入圖片描述

在這里插入圖片描述

補(bǔ)充：

如何在vue中使用Font Awesome庫

要在Vue中使用FontAwesome組件庫圖標(biāo)，你可以按照以下步驟進(jìn)行操作：

1.安裝FontAwesome庫：在項(xiàng)目的根目錄下通過npm或者yarn安裝FontAwesome庫。打開終端并執(zhí)行以下命令：

npm install @fortawesome/fontawesome-svg-core
npm install @fortawesome/vue-fontawesome
npm install @fortawesome/free-solid-svg-icons
npm install @fortawesome/free-regular-svg-icons

2.在main.js文件中引入FontAwesome庫并配置：

import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'//同一個(gè)圖標(biāo)的其他系列
library.add(fas,far)
Vue.component('font-awesome-icon', FontAwesomeIcon)

3.加載圖標(biāo)，例如：

<font-awesome-icon icon="heart" />
<font-awesome-icon icon="clock" />
<font-awesome-icon icon="clock" style="color: #476151;" />

到此這篇關(guān)于Vue項(xiàng)目中使用fontawesome圖標(biāo)庫的文章就介紹到這了,更多相關(guān)vue fontawesome圖標(biāo)庫內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論