简介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.eotIE8 及以下按需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 relstylesheet href/static/font-awesome-4.7.0/css/font-awesome.min.css引入之后在页面里写i classfa 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:KeyFontAwesome/MyWpfApp;component/Fonts/#FontAwesome/FontFamily /Window.Resources这里的#FontAwesome是字体内部名称不是文件名。你可以用字体查看器打开fontawesome-webfont.ttf看到它的家族名就是FontAwesome。如果写错图标会显示成方框。3.2 用 TextBlock 显示图标并绑定 UnicodeWPF 里显示 Font Awesome 图标本质是往TextBlock里塞一个 Unicode 字符。4.7.0 的图标码点都在私有使用区比如fa-home是\uf015。!-- 静态显示一个主页图标 -- TextBlock FontFamily{StaticResource FontAwesome} Text#xf015; FontSize24 Foreground#333/ !-- 在按钮里用图标 文字 -- Button StackPanel OrientationHorizontal TextBlock FontFamily{StaticResource FontAwesome} Text#xf067; Margin0,0,6,0/ TextBlock Text新增/ /StackPanel /Button#xf015;是 XML 字符实体写法对应 Unicode 码点 UF015。如果你在 C# 代码里动态设置用\uf015即可。3.3 封装成可复用的图标控件每次写FontFamily和 Unicode 太啰嗦我一般会封装一个简单的IconTextBlockpublic 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 Iconf015 FontSize20/。参数说明Icon属性接收十六进制码点字符串不带0x和\uFontSize控制图标大小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设置VerticalAlignmentCenter必要时用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 # --flavorwoff2 同时生成 woff2 格式 pyftsubset fontawesome-webfont.ttf \ --text-fileused_icons.txt \ --output-filefa-subset.woff2 \ --flavorwoff2 \ --with-zopfli参数说明--text-file里的码点用十六进制表示不带0x--flavorwoff2输出 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, encodingutf-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, encodingutf-8) as out: out.write(class_name,unicode_hex\n) for name, code in matches: out.write(ffa-{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 也能当迁移对照表用——虽然类名前缀变了但码点基本没动可以写脚本批量替换。希望帮到你。本文还有配套的精品资源点击获取