企业官网建设流程全解析

Font Awesome 7 图标 3 步上手：2800+ 图标覆盖社交、支付与技术栈展示

【免费下载链接】Font-AwesomeThe iconic SVG, font, and CSS toolkit项目地址: https://gitcode.com/GitHub_Trending/fo/Font-Awesome

给页脚加一排社交分享按钮，或在支付页标出支持哪些卡，手画 SVG 或者去官网逐张下载原图太慢了。Font Awesome 7（一个开源的图标字体 + CSS 工具包）解决的就是这个问题：内置 549 个品牌图标、1984 个 Solid 实心图标、273 个 Regular 线条图标，一行 HTML 就能渲染，颜色、大小随 CSS 控制。

快速上手（三步跑通）

第 1 步：把仓库拿到本地

git clone https://gitcode.com/GitHub_Trending/fo/Font-Awesome

仓库里的css/、webfonts/两个目录就是本地部署所需的全部静态资源。

第 2 步：在你的页面引入样式表

<link rel="stylesheet" href="css/all.min.css">

all.min.css会同时加载webfonts/下的 3 个 woff2 字体文件（品牌、实心、线条各一个）。

第 3 步：写一个图标

<i class="fa-brands fa-github"></i>

刷新页面，你会看到 GitHub 的图标出现。之后只要换图标名（如fa-qq、fa-react），效果就会跟着变。

按场景选功能

图标名怎么查？打开 metadata/icons.yml，它就是全库 2800+ 个图标的索引，每个条目带label（显示名）和styles（所属字体族）。

做社交分享

页脚一排社交按钮，fa-brands前缀对应品牌图标字体：

<i class="fa-brands fa-facebook"></i> <i class="fa-brands fa-x-twitter"></i> <i class="fa-brands fa-weixin"></i> <i class="fa-brands fa-weibo"></i> <i class="fa-brands fa-qq"></i> <i class="fa-brands fa-zhihu"></i>

国内常用的微信、微博、QQ、知乎、小红书（fa-xiaohongshu若需要可查 icons.yml）都在 svgs/brands/ 目录下有源文件，目录名就是图标名。

接支付页

支付确认页把支持的支付方式摆出来，能明显降低用户犹豫。信用卡行加一个钱包行即可：

<i class="fa-brands fa-cc-visa"></i> <i class="fa-brands fa-cc-mastercard"></i> <i class="fa-brands fa-alipay"></i> <i class="fa-brands fa-apple-pay"></i> <i class="fa-brands fa-google-pay"></i>

品牌图标默认跟随文字颜色，想区分各卡组织的品牌色，给每个<i>单独设color即可。

展示技术栈

个人主页、开源项目 README 里展示 "Built with" 徽章，一行搞定：

<i class="fa-brands fa-react"></i> <i class="fa-brands fa-node-js"></i> <i class="fa-brands fa-python"></i> <i class="fa-brands fa-docker"></i> <i class="fa-brands fa-github"></i>

这些图标名都能直接对照 svgs/brands/ 里的同名 .svg 文件，方便你核对图标长什么样。

进阶定制技巧

常用定制类都在 scss/_sizing.scss 和 scss/_animated.scss 里定义，直接给图标加类名即可：

前后对比：<i class="fa-brands fa-qq"></i>默认 1em 大小、跟随文字颜色；改成<i class="fa-brands fa-qq fa-3x" style="color:#12b76a"></i>后就是 3 倍大小、微信绿，一行 class 的差别。

新手常见坑

Q1：图标显示成空白方块？多半是webfonts/没跟css/保持相对位置（all.css 里写死了../webfonts/...路径）。把整个仓库目录原样拷走，或者改好字体路径再引用。

Q2：用了fa-solid前缀找不到图标？品牌图标都在 brands 字体里，前缀必须是fa-brands；fa-solid、fa-regular只对应另外两个字体族。查 metadata/icon-families.yml 里该图标的style字段就能确定用哪个前缀。

Q3：升级后旧类名失效？v4 时代的fa-facebook-square等旧类名已迁移，如fa-square-x-twitter、fa-square-facebook。仓库的 js/v4-shims.js 和 css/v4-shims.css 专门做了旧名映射，引入它们可平滑过渡。

Font Awesome 7 的核心价值在于：2800+ 个图标、3 种字体风格、一份 CSS 全搞定，不用为每个图标单独维护 SVG 文件。更多细节看仓库里的 UPGRADING.md 和 CHANGELOG.md。

【免费下载链接】Font-AwesomeThe iconic SVG, font, and CSS toolkit项目地址: https://gitcode.com/GitHub_Trending/fo/Font-Awesome