即拷即用的 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项目入口文件配置
import '@fortawesome/fontawesome-free/css/all.min.css';Vite 配置文件
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" />npm install @fortawesome/angular-fontawesome @fortawesome/free-solid-svg-icons// app.module.ts
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';
import { faHome, faUser } from '@fortawesome/free-solid-svg-icons';
library.add(faHome, faUser);
@NgModule({
imports: [FontAwesomeModule],
...
})
export class AppModule {}
// component.html
// <fa-icon [icon]="faHome"></fa-icon>
// <fa-icon [icon]="faUser" size="2x"></fa-icon><!-- Web Font 方式 -->
<i class="fa-solid fa-house"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-brands fa-github"></i>
<!-- 带大小 -->
<i class="fa-solid fa-camera fa-2x"></i>
<i class="fa-solid fa-camera fa-3x"></i>
<!-- 带动画 -->
<i class="fa-solid fa-spinner fa-spin"></i>
<i class="fa-solid fa-circle fa-beat"></i><!-- SVG inline 方式 -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" width="24" height="24">
<path fill="currentColor" d="M575.8 255.5c0 18.1-14.6 32.8-32.8 32.8h-11.5c-5.8 0-8.3-3.5-8.3-7.6s1.7-7.1 4.7-9.3c1.3-.9 3-1.5 4.7-1.5h9.1c8.6 0 16.6-4.4 21.1-11.9l4.2-7.2c2.3-3.8 6.6-6.1 11.3-6.1 7 0 13.3 4.7 15.2 11.4l2.3 8.1c.8 2.7 2.3 5.2 4.3 7.2l8.3 8.4c3.3 3.3 3.3 8.7 0 12l-8.3 8.4c-4.5 4.5-11.1 5.7-16.8 3.1l-5.7-2.7c-3.2-1.5-6.8-1.5-10 0l-5.7 2.7c-5.7 2.6-12.3 1.4-16.8-3.1l-8.3-8.4c-3.3-3.3-3.3-8.7 0-12l8.3-8.4c2-2 3.5-4.5 4.3-7.2l2.3-8.1c1.9-6.7 8.2-11.4 15.2-11.4 4.7 0 9 .2 11.3 1.5z"/>
</svg>
<!-- 或使用 FA 官方 SVG sprite -->
<svg viewBox="0 0 512 512">
<use xlink:href="/static/sprites/free-solid.svg#house"></use>
</svg>在自定义变量之前导入 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)
初始化 FontAwesome DOM 监视器
dom.watch()将所需文件复制到项目目录
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";
}