简介：Font Awesome 4.7.0 是一套面向网页设计师与前端开发者的矢量图标字体库，内含约470个覆盖社交网络、通用对象与界面元素的图标，适合需要在响应式页面中灵活调用图标的初中级开发者。压缩包共37个文件，约654KB，包含eot、ttf、woff、woff2、otf、svg等多种字体格式以兼容不同浏览器，同时提供css、less、scss三类样式源码，便于直接引入或按需定制。资源还附带图标预览页与使用说明文档，可帮助读者快速查找类名、掌握fa-lg、fa-2x等尺寸控制及翻转、旋转等效果。目前已有946人学习下载，适合对新增功能需求不高、追求稳定版本的项目参考使用。
1. font-awesome-4.7.0：一个老版本图标库，为什么还有人非用它不可
接手一个五年前的后台管理系统时，我第一反应是把font-awesome-4.7.0换成新版。结果翻车了——页面里几十个图标全变成方块，连登录按钮上的锁头都没了。后来查清楚，项目里用的是fa fa-user这种老式类名，新版 Font Awesome 5 之后改成了fas fa-user，前缀一变，整套图标体系直接崩。这件事让我重新审视这个 2016 年发布的版本：它虽然老，但胜在稳定、体积小、类名简单，至今仍有大量遗留项目、内网系统、WPF 桌面程序在用它。如果你手上正好有这类项目，或者想找一个不依赖构建工具、直接引 CSS 就能跑的图标方案，font-awesome-4.7.0依然是可靠选择。这篇笔记就围绕它怎么落地、参数怎么配、坑在哪，把整套流程讲透。
2. 拿到 font-awesome-4.7.0 之后，先搞清楚目录里每个文件干什么
很多人下载完压缩包，看到一堆文件就懵了，随便把整个文件夹丢进项目，结果路径错乱、图标不显示。其实这个版本的目录结构非常清晰，只要分清「给谁用」就行。
2.1 目录结构与文件用途对照
解压font-awesome-4.7.0后，你会看到四个顶层目录：css、fonts、less、scss。其中真正跟浏览器直接相关的是css和fonts，另外两个是预处理器源码，不用管。
| 目录/文件 | 用途 | 是否必须 |
|---|---|---|
css/font-awesome.min.css | 压缩后的样式表，生产环境用 | 是 |
css/font-awesome.css | 未压缩样式表，方便调试 | 否 |
fonts/fontawesome-webfont.woff2 | 现代浏览器字体文件 | 是 |
fonts/fontawesome-webfont.woff | 兼容旧版浏览器 | 建议保留 |
fonts/fontawesome-webfont.ttf | 部分安卓与旧 Safari | 建议保留 |
fonts/fontawesome-webfont.eot | IE8 及以下 | 按需 |
fonts/FontAwesome.otf | 桌面端设计软件用 | 否 |
less/scss/ | 源码，改图标变量时才用 | 否 |
关键点：css和fonts必须保持相对位置不变。font-awesome.min.css里写死了../fonts/fontawesome-webfont.woff2这样的路径，如果你把 CSS 放到assets/css/，字体却丢到assets/fonts/，路径就对不上，图标会全部变成空白方块。
2.2 最小可用引入方式
最稳妥的做法是保持官方目录结构，把整个font-awesome-4.7.0文件夹放到项目静态资源根目录，然后在 HTML 的<head>里引一行：
<!-- 保持 font-awesome-4.7.0 文件夹完整，不要拆散 css 和 fonts --> <link rel="stylesheet" href="/static/font-awesome-4.7.0/css/font-awesome.min.css">引入之后，在页面里写<i class="fa fa-home"></i>，如果能看到房子图标，说明字体加载成功。如果显示方块或空白，打开浏览器开发者工具的 Network 面板，看fontawesome-webfont.woff2是不是 404。这是最常见的翻车点，九成图标不显示都是路径问题。
2.3 类名规则与图标查找方法
font-awesome-4.7.0的类名规则是fa fa-{图标名}。fa是基础类，负责设置字体族和渲染方式；fa-home、fa-user、fa-cog才是具体图标。你可以在解压目录里打开css/font-awesome.css，搜索.fa-home:before，看到content: "\f015"，这就是图标对应的 Unicode 码点。
我一般会保留一份官方速查页的离线副本，或者直接看font-awesome.css里的注释。比如要找「设置」图标，搜fa-cog或fa-gear都能找到。注意 4.7.0 里有些图标有别名，比如fa-remove和fa-times是同一个，用哪个都行。
提示：不要用
fa单独一个类去显示图标，必须搭配具体图标类名，否则只会渲染出一个空白占位。
3. 在 WPF 里用 font-awesome-4.7.0：从字体加载到图标绑定
热搜里有人问「wpf如何使用font-awesome」，这确实是个高频需求。WPF 不像 Web 那样引个 CSS 就行，它需要把字体文件作为资源嵌入，再通过TextBlock的FontFamily去引用。下面是我在多个桌面项目里验证过的流程。
3.1 把字体文件加入 WPF 项目
第一步，在 WPF 项目里新建一个Fonts文件夹，把font-awesome-4.7.0/fonts/fontawesome-webfont.ttf复制进去。注意 WPF 对woff和woff2支持不好，优先用ttf或otf。
第二步，在解决方案资源管理器里选中这个 ttf 文件，右键属性，把「生成操作」改为「Resource」。这一步很关键，如果保持默认的「内容」，字体不会被打进程序集，运行时找不到。
第三步，在App.xaml或具体页面的Window.Resources里定义字体族：
<Window.Resources> <!-- 路径格式：/程序集名称;component/文件夹/字体文件名#字体内部名称 --> <FontFamily x:Key="FontAwesome">/MyWpfApp;component/Fonts/#FontAwesome</FontFamily> </Window.Resources>这里的#FontAwesome是字体内部名称，不是文件名。你可以用字体查看器打开fontawesome-webfont.ttf，看到它的家族名就是FontAwesome。如果写错，图标会显示成方框。
3.2 用 TextBlock 显示图标并绑定 Unicode
WPF 里显示 Font Awesome 图标，本质是往TextBlock里塞一个 Unicode 字符。4.7.0 的图标码点都在私有使用区，比如fa-home是\uf015。
<!-- 静态显示一个主页图标 --> <TextBlock FontFamily="{StaticResource FontAwesome}" Text="" FontSize="24" Foreground="#333"/> <!-- 在按钮里用图标 + 文字 --> <Button> <StackPanel Orientation="Horizontal"> <TextBlock FontFamily="{StaticResource FontAwesome}" Text="" Margin="0,0,6,0"/> <TextBlock Text="新增"/> </StackPanel> </Button>是 XML 字符实体写法，对应 Unicode 码点 U+F015。如果你在 C# 代码里动态设置，用"\uf015"即可。
3.3 封装成可复用的图标控件
每次写FontFamily和 Unicode 太啰嗦，我一般会封装一个简单的IconTextBlock：
public class IconTextBlock : TextBlock { public IconTextBlock() { // 统一设置字体族，避免每个实例重复写 FontFamily = new FontFamily("/MyWpfApp;component/Fonts/#FontAwesome"); } public string Icon { get { return (string)GetValue(IconProperty); } set { SetValue(IconProperty, value); } } public static readonly DependencyProperty IconProperty = DependencyProperty.Register("Icon", typeof(string), typeof(IconTextBlock), new PropertyMetadata(string.Empty, OnIconChanged)); private static void OnIconChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) { var ctrl = d as IconTextBlock; if (ctrl == null) return; // 把 "f015" 这样的字符串转成对应的 Unicode 字符 var code = e.NewValue as string; if (!string.IsNullOrEmpty(code)) { ctrl.Text = char.ConvertFromUtf32(Convert.ToInt32(code, 16)); } } }用法就变成<local:IconTextBlock Icon="f015" FontSize="20"/>。参数说明：Icon属性接收十六进制码点字符串，不带0x和\u；FontSize控制图标大小；Foreground控制颜色。这样在 XAML 里绑定 ViewModel 的图标字段也很方便。
注意：WPF 里字体路径的
#后面必须是字体家族名，不是文件名。用错会导致设计器里能看到图标、运行时却变成方框，这个坑我踩过不止一次。
4. 避坑与排查：font-awesome-4.7.0 最常见的 5 个翻车现场
4.1 图标显示为方块或空白
现象：页面或窗口里图标位置是空的，或者显示一个空心方块。原因：字体文件没有正确加载。Web 端多半是 CSS 里../fonts/路径与实际目录不符；WPF 端多半是字体文件生成操作没设为Resource，或者FontFamily路径写错。解决：Web 端打开开发者工具 Network 面板，看字体请求是否 404，是则调整目录结构保持css和fonts同级。WPF 端检查 ttf 文件属性，确认生成操作为Resource，并核对#后面的字体家族名。
4.2 升级到 Font Awesome 5 后图标全丢
现象：把font-awesome-4.7.0换成 5.x 或 6.x 后，原来fa fa-user的图标不显示了。原因：Font Awesome 5 开始把图标分成fas、far、fab等前缀，旧类名fa不再默认映射到实心图标。解决：要么继续用 4.7.0 不动，要么全局替换类名：fa fa-改成fas fa-，同时引入新版 CSS 和字体文件。遗留项目建议锁死 4.7.0，不要轻易升级。
4.3 图标和文字基线不对齐
现象：图标比旁边文字偏高或偏低，排版看起来歪。原因：Font Awesome 图标本质是字体字符，不同字号下基线位置和普通文字不完全一致。解决：给图标元素加vertical-align: middle，或者用line-height与父容器统一。WPF 里可以给TextBlock设置VerticalAlignment="Center"，必要时用Margin微调。
4.4 打包后图标不显示（WPF 发布场景）
现象：开发环境正常，发布成 exe 安装到其他机器后图标全变方框。原因：字体文件没有作为资源嵌入程序集，或者发布时被排除。解决：确认 ttf 文件生成操作为Resource，并且在.csproj里没有被ExcludeFromPackage之类的规则排除。发布后检查程序集大小，如果比预期小很多，说明字体没打进去。
4.5 图标太多导致首屏加载慢
现象：Web 页面引入font-awesome.min.css后，首屏渲染被字体文件阻塞。原因：fontawesome-webfont.woff2虽然只有几十 KB，但如果服务器响应慢，浏览器会等待字体加载完成才渲染图标区域。解决：给字体文件设置长期缓存头，或者用font-display: swap让文字先显示。4.7.0 的 CSS 里没有font-display声明，可以手动在@font-face里加上font-display: swap;。如果只用到少数几个图标，考虑用 Iconfont 按需生成子集，体积能压到几 KB。
5. 进阶技巧：按需裁剪字体子集与图标码点速查
font-awesome-4.7.0完整字体文件大约 160 KB 左右，包含 675 个图标。但很多项目实际只用十几个。如果能裁掉不用的字形，首屏加载会明显改善。我一般用fonttools这个 Python 库来做子集化。
5.1 用 fonttools 裁剪只保留用到的图标
先安装工具：
pip install fonttools brotli然后准备一个文本文件used_icons.txt，每行写一个你要保留的 Unicode 码点，比如：
f015 f067 f02b f00c接着运行子集化命令：
# --text-file 指定保留的码点列表 # --output-file 输出新的 ttf # --flavor=woff2 同时生成 woff2 格式 pyftsubset fontawesome-webfont.ttf \ --text-file=used_icons.txt \ --output-file=fa-subset.woff2 \ --flavor=woff2 \ --with-zopfli参数说明：--text-file里的码点用十六进制表示，不带0x；--flavor=woff2输出 woff2 格式，体积最小；--with-zopfli启用更激进的压缩，耗时略长但体积更小。裁完之后，原来 160 KB 的字体可能只剩 8 KB 左右。
裁完后，你需要同步修改 CSS 里的@font-face的src指向新文件，并且确认font-family名称没变。如果只改了字体文件没改 CSS，浏览器还是会去请求旧文件。
5.2 图标码点速查与自动化提取
手动查码点容易出错，我写了一个小脚本从font-awesome.css里直接提取类名和码点对应关系：
import re # 读取 font-awesome.css，提取 .fa-xxx:before { content: "\fxxx"; } 格式 with open('font-awesome-4.7.0/css/font-awesome.css', 'r', encoding='utf-8') as f: css = f.read() # 正则匹配类名和 content 码点 pattern = re.compile(r'\.fa-([\w-]+):before\s*\{\s*content:\s*"\\([0-9a-f]+)"') matches = pattern.findall(css) # 输出成 CSV，方便在 Excel 里筛选 with open('fa_icons.csv', 'w', encoding='utf-8') as out: out.write('class_name,unicode_hex\n') for name, code in matches: out.write(f'fa-{name},f{code}\n') print(f'共提取 {len(matches)} 个图标')这段代码的逻辑是：用正则匹配 CSS 里所有.fa-xxx:before块，捕获类名和content里的十六进制码点，然后写成 CSV。参数说明：正则里的[\w-]+匹配类名中的字母、数字和连字符；\\([0-9a-f]+)匹配反斜杠后的十六进制码点。跑完之后你会得到一个完整的图标清单，想找什么图标直接搜 CSV 就行，不用再翻 CSS 文件。
5.3 一个我常用的习惯
每次接手新项目，我会先跑一遍上面的提取脚本，把fa_icons.csv存到项目文档目录。这样前端问「有没有某个图标」时，我直接搜 CSV 就能回答，不用打开浏览器。另外，如果项目决定从 4.7.0 升级到新版，这份 CSV 也能当迁移对照表用——虽然类名前缀变了，但码点基本没动，可以写脚本批量替换。
希望帮到你。
本文还有配套的精品资源，点击获取
