即拷即用的 FontAwesome 常用代码集合，涵盖各种使用场景
全球最流行的公共 CDN，速度快，覆盖广。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">支持 npm 包的 CDN，可使用版本范围语法。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/all.min.css">基于 npm 的 CDN，适合快速原型开发。
<link rel="stylesheet" href="https://unpkg.com/@fortawesome/[email protected]/css/all.min.css">npm install @fortawesome/fontawesome-freenpm install @fortawesome/[email protected]yarn add @fortawesome/fontawesome-free// 在入口 JS 中引入
import '@fortawesome/fontawesome-free/css/all.min.css';// vite.config.js 无需特殊配置，直接在 main.js 中引入
import '@fortawesome/fontawesome-free/css/all.min.css';npm install @fortawesome/react-fontawesome @fortawesome/free-solid-svg-iconsimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faHome, faUser, faGear } from '@fortawesome/free-solid-svg-icons'
function MyComponent() {
return (
<div>
<FontAwesomeIcon icon={faHome} />
<FontAwesomeIcon icon={faUser} size="2x" />
<FontAwesomeIcon icon={faGear} spin />
</div>
)
}npm install @fortawesome/vue-fontawesome @fortawesome/free-solid-svg-iconsimport { createApp } from 'vue'
import App from './App.vue'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faHome, faUser } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
library.add(faHome, faUser)
createApp(App).component('font-awesome-icon', FontAwesomeIcon).mount('#app')
// 模板中使用
// <font-awesome-icon icon="fa-solid fa-home" />
// <font-awesome-icon icon="fa-solid fa-user" size="2x" />// 在引入 FontAwesome SCSS 之前定义
$fa-font-path: '/fonts';
$fa-font-size-base: 16px;
$fa-line-height-base: 1.5;
$fa-css-prefix: 'fa';
// 引入 FontAwesome SCSS
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/regular';
@import '~@fortawesome/fontawesome-free/scss/brands';import { library, dom } from '@fortawesome/fontawesome-svg-core'
import { faHome } from '@fortawesome/free-solid-svg-icons/faHome'
import { faUser } from '@fortawesome/free-solid-svg-icons/faUser'
library.add(faHome, faUser)
// 自动替换 DOM 中的 <i> 元素为 SVG
dom.watch()# npm 安装后复制所需文件
cp -r node_modules/@fortawesome/fontawesome-free/webfonts project/assets/
cp node_modules/@fortawesome/fontawesome-free/css/all.min.css project/assets/location /assets/ {
expires 30d;
add_header Cache-Control "public, immutable";
}