• ? Github Star: 73.4k^[1]

• ? 官網(wǎng)^[2]

1、Font Awesome 是什么？

Font awesome 是一個流行的開源圖標(biāo)庫，提供了一套可縮放的矢量圖標(biāo)，適用于頁面設(shè)計(jì)和開發(fā)。圖標(biāo)以字體文件的形式提供，可以像字體一樣使用，支持響應(yīng)式布局，并且很容易地通過 CSS 進(jìn)行樣式定制，如大小、顏色、陰影等。Font Awesome 提供免費(fèi)版和專業(yè)版，其中免費(fèi)版 2050 個圖標(biāo)，專業(yè)版 33612 個圖標(biāo)。

Font Awesome 的獨(dú)特優(yōu)勢：

• ? 豐富的圖標(biāo)選擇：Font Awesome提供了數(shù)千個高質(zhì)量的矢量圖標(biāo)，涵蓋了各種常見的應(yīng)用場景，如社交媒體、支付方式、交通工具等

• ? 易于定制：圖標(biāo)的顏色、大小和陰影等樣式可通過 CSS 進(jìn)行調(diào)整，提供高度的自定義能力。

• ? 動畫效果：支持動畫效果，使圖標(biāo)更加生動有趣。

• ? SEO 索引：圖標(biāo)是以字體形式實(shí)現(xiàn)的，可以像文本一樣被搜索引擎索引，有助于提高網(wǎng)站的 SEO 性能。

• ? 跨瀏覽器兼容性：圖標(biāo)在多種瀏覽器上都能保持良好的顯示效果，確保圖標(biāo)在不同設(shè)備上的一致性。

• ? 免費(fèi)和開源：提供了免費(fèi)版本，同時也有付費(fèi)版本，包含更多圖標(biāo)和功能。

2、核心功能

圖標(biāo)分類

Font awesome 6 中提供了多達(dá) 68 種分類，涵蓋了 Web 設(shè)計(jì)和開發(fā)的許多方面，可以滿足各種需求。常見的類別。

PS：付費(fèi)版的圖標(biāo)更豐富

樣式設(shè)置

作為一套圖標(biāo)字體，提供了豐富的樣式設(shè)置選項(xiàng)，如字體、顏色、旋轉(zhuǎn)、陰影、邊框、動畫、列表圖標(biāo)等。通過這些設(shè)置使得 Font Awesome 圖標(biāo)非常靈活，可以適應(yīng)各種設(shè)計(jì)需求。

更多功能，請參考官方文檔^[3]

3、快速開始

集成到 React 項(xiàng)目中

1.安裝必要的 npm 包：

使用 npm 或 yarn 命令安裝 Font Awesome 的 React 組件以及所需的圖標(biāo)樣式包。例如，如果您需要免費(fèi)的固態(tài)圖標(biāo)，可以安裝以下包：

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

2.配置 Font Awesome：

在項(xiàng)目的入口文件中，導(dǎo)入所需的 Font Awesome 模塊，并配置圖標(biāo)庫以包含您需要的圖標(biāo)。

import { library } from '@fortawesome/fontawesome-svg-core';
import { faUserSecret } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

library.add(faUserSecret);

3.在 React 組件中使用圖標(biāo)：

在 React 組件中，使用 FontAwesomeIcon 組件并通過 icon 屬性指定圖標(biāo)名稱。

import React from 'react';

function App() {
  return (
    <div><FontAwesomeIcon icon={faUserSecret} /></div>
  );
}
export default App;

集成到 Vue 項(xiàng)目中

1.安裝必要的包

使用 npm 或 yarn 安裝 Font awesome 的核心庫和所需的圖標(biāo)樣式包。對于 Vue3 項(xiàng)目，需要安裝：

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

2.配置 Font Awesome：

在項(xiàng)目的主入口文件（通常是 main.js 或 main.ts）中，導(dǎo)入Font Awesome的核心庫、圖標(biāo)組件以及所需的圖標(biāo)樣式，并將圖標(biāo)添加到庫中。

// plugins/fontawesome.js
import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { faAddressBook } from '@fortawesome/free-solid-svg-icons'
// 引入圖標(biāo)
library.add(faAddressBook)
const install = (app) => {
  // 注冊全局組件 FontAwesomeIcon
  app.component('font-awesome-icon', FontAwesomeIcon)
}
export default install

在 main.js 中引入：

import installFontAwesomeIcon from './plugins/fontawesome'
const app = createApp(App)
installFontAwesomeIcon(app)
app.mount('#app')

3.在 Vue 中使用圖標(biāo)

在 Vue 組件的模板中，使用<font-awesome-icon>標(biāo)簽并通過 icon 屬性指定圖標(biāo)名稱。

<template>
  <div id="app">
    <font-awesome-icon icon="user-secret" size="2x"/>
  </div>
</template>

4、總結(jié)

作為一個開源項(xiàng)目，不僅提供免費(fèi)的基礎(chǔ)圖標(biāo)集，還通過專業(yè)版滿足對更多樣化圖標(biāo)需求的開發(fā)者。通過簡單的集成步驟，無論是在 React 還是 Vue 等現(xiàn)代前端框架中，Font Awesome 都能輕松地融入項(xiàng)目，提升用戶體驗(yàn)和界面的視覺效果。Font Awesome 是一個強(qiáng)大而靈活的圖標(biāo)解決方案，值得小伙伴們嘗試。

祝好！

引用鏈接

[1] Github Star: 73.4k: https://github.com/FortAwesome/Font-Awesome
[2] 官網(wǎng): https://fontawesome.com/
[3] 文檔: https://docs.fontawesome.com/web/