简介Font Awesome 4.7.0 是一套面向网页设计师与前端开发者的矢量图标字体库。它将图标封装为 Web 字体可以像文字一样调整大小、颜色与清晰度适配不同屏幕分辨率特别适合响应式界面、后台管理及移动端页面避免传统图片图标缩放失真的问题。压缩包共 37 个文件核心包括 14 个 SCSS 与 14 个 LESS 源文件方便使用 Sass/LESS 预处理器定制图标样式另外配有 2 个 CSS 成品样式表以及 eot、ttf、woff、woff2、svg、otf 六种字体格式基本覆盖新旧浏览器兼容需求整包仅 654KB引入成本极低。目前已有 946 人学习下载对于不需要最新特性的中小型项目来说这个版本成熟稳定、社区资料多是省心的选择。该版本支持通过 fa fa-search 这类类名快速调用图标fa-lg、fa-2x 控制尺寸fa-flip-horizontal、fa-flip-vertical 实现翻转包内附有使用说明文件便于快速了解类名规则与引用注意事项缩短接入时间。1. font-awesome 4.7.0 是谁还在老项目里跑着的图标字体接手一个 2017 年就开始跑的内部管理后台模板文件里到处都是i classfa fa-pencil/i部署包里躺着一个 font-awesome-4.7.0 文件夹。这就是本文要讲的东西Font Awesome 4.x 的最后一个版本发布于 2017 年一共 675 个图标用「字体 CSS 伪元素」的方式在网页里渲染图标不依赖任何 JavaScript也没有 SVG 雪碧图那套复杂流程。它的价值不在“新”而在“存量”大量老系统、外包项目、Bootstrap 3 后台模板到今天还在用它。你搜索 font-awesome-4.7.0大概率是遇到了三种情况本地部署时字体加载不出来、准备把它接进新的构建工程、或者要从 4.7.0 迁移到 5.x/6.x。这篇文章会把这三条路都走一遍包括部署的每个命令、参数的来龙去脉以及我在实际项目里踩过的坑。2. 本地部署 font-awesome 4.7.0目录、路径和最小页面2.1 下载和目录5 类文件各管什么常见做法是从官方 GitHub 的 release 里下载font-awesome-4.7.0.zip或者直接拿 CDN 上同版本的文件落盘。解压后你会看到这样的目录结构文件/目录作用我们为什么需要它css/font-awesome.css全部图标的 class 声明含font-face页面里必须引用的样式css/font-awesome.min.css压缩版生产环境用这个体积小一半建议直接用fonts/fontawesome-webfont.woff2现代浏览器用的图标字体页面渲染图标的真正载体fonts/fontawesome-webfont.woff老浏览器回退要不要保留看你的兼容范围fonts/fontawesome-webfont.ttf老 Safari、桌面端兼容要兼容旧系统时保留less/、scss/源样式可编译定制只有你想改主题色时用得到下载后第一件事不是急着往项目里复制而是先确认字体文件没被系统“帮忙”改成 0 字节。Windows 下载 zip 再解压一般没事但如果你是从即时通讯软件里转发的安装包偶尔会出现解压后woff2文件损坏的情况后面所有图标都会变成方块。我一般会顺手看一眼fonts目录下每个文件的大小低于 10KB 的字体文件基本就是坏了。2.2 最小 HTML 页面先确认字体能加载再接入工程把css和fonts两个目录原样拷进项目后先做一个最小页面验证不要直接往老系统里塞否则出了问题分不清是路径错了还是被其他样式污染。在项目根目录新建一个test-fa.html!DOCTYPE html html langzh-CN head meta charsetUTF-8 titleFont Awesome 4.7.0 本地验证/title link relstylesheet hrefcss/font-awesome.min.css /head body pi classfa fa-camera-retro/i 相机图标/p pi classfa fa-cog fa-spin/i 旋转设置/p pi classfa fa-address-book/i 通讯录/p pi classfa fa-user-circle-o/i 用户/p /body /html用浏览器直接打开这个文件通常看不到图标因为file://协议下浏览器会拦截字体文件加载。正确做法是起一个本地静态服务在项目根目录执行python3 -m http.server 8080然后浏览器访问http://localhost:8080/test-fa.html。看到四个图标正常渲染说明部署路径没问题。这里的关键逻辑是Font Awesome 4.7.0 的所有图标 class本质是通过:before伪元素往页面里塞一个字符这个字符落在FontAwesome字体里字体加载失败字符就显示成方块或空白。2.3 css 与 fonts 的相对路径字体 404 的最常见来源很多人把font-awesome.min.css复制到任意目录比如放进css/plugins/但字体文件还留在原来的fonts/下于是页面 404。原因在于font-awesome.min.css内部的font-face是这么写的font-face { font-family: FontAwesome; src: url(../fonts/fontawesome-webfont.eot?v4.7.0); src: url(../fonts/fontawesome-webfont.eot?#iefixv4.7.0) format(embedded-opentype), url(../fonts/fontawesome-webfont.woff2?v4.7.0) format(woff2), url(../fonts/fontawesome-webfont.woff?v4.7.0) format(woff), url(../fonts/fontawesome-webfont.ttf?v4.7.0) format(truetype); }这里的../fonts/是相对于 CSS 文件所在目录解析的。CSS 在css/下那字体就在项目根的fonts/下。你要么保持 css 和 fonts 的原始相对位置要么手动把这段font-face里的路径改掉。另一个高频问题是服务器 MIME 类型没配Nginx 默认不认识woff2会把字体请求返回成application/octet-stream部分浏览器直接拒绝加载。在 Nginx 的http块里补上types { font/woff2 woff2; font/woff woff; font/ttf ttf; }改完nginx -t检查配置再nginx -s reload。这一步做完本地部署的 90% 问题都解决了。3. 把 font-awesome 4.7.0 接进 CDN、Bootstrap 3 和 webpack3.1 用 CDN 一步接入路径规律与版本锁定的注意点如果老系统没有离线要求最省事的方式是直接引 CDN。市面上主流 CDN 对 font-awesome 4.7.0 的路径大体都是/font-awesome4.7.0/css/font-awesome.min.css这种结构注意两点一是版本号必须写死4.7.0不要写4或latest否则升级后 class 断裂你根本不知道二是确认你的 CDN 支持woff2的 MIME否则效果和本地部署那个坑一样。我一般会这样写link relstylesheet hrefhttps://unpkg.com/font-awesome4.7.0/css/font-awesome.min.css但这里有个风险老项目如果还有原因是历史遗留的 HTTP 页面从 HTTPS CDN 引字体没问题反过来就会触发混合内容拦截后面第 4 章专门讲。CDN 方式适合临时验证和原型页面正式环境我还是建议把文件下到本地毕竟你没法控制上游 CDN 哪天把 4.7.0 下架。3.2 在 Bootstrap 3 布局里对齐图标fa-fw / fa-ul 的实际用法Font Awesome 4.7.0 发布时主要搭配 Bootstrap 3 使用两者的 class 体系配合得很默契。后端管理系统最常见的场景是导航菜单和表单按钮直接写i classfa fa-gear/i 系统设置也能用但图标宽度不一致菜单竖排后错落感很明显。这时要用fa-fw固定宽度ul classnav nav-sidebar lia href#i classfa fa-dashboard fa-fw/i 控制台/a/li lia href#i classfa fa-users fa-fw/i 用户管理/a/li lia href#i classfa fa-file-text-o fa-fw/i 内容列表/a/li /ulfa-fw的原理是把伪元素生成的图标字符放在一个固定宽度容器里约 1.285714em所有图标按同一个宽度左对齐文字自然对齐。这个参数在 4.7.0 的 CSS 里已经内置直接fa fa-xxx fa-fw三个类叠加就行不需要额外写样式。表单按钮要注意另一个场景Bootstrap 3 的btn自带line-height和font-family如果按钮里图标偶尔和文字错位给i元素加一行vertical-align: -2px就回来了。这里不推荐再包一层 span老项目改起来成本高。3.3 在 webpack 5 / Vite 项目里接管字体文件把 4.7.0 接进现代构建工程时最常遇到的报错是Module parse failed原因是 webpack 不知道如何处理woff2文件。webpack 5 的正确做法是把它声明成静态资源// webpack.config.js 片段 module.exports { module: { rules: [ { test: /\.(woff2?|eot|ttf|otf|svg)(\?.*)?$/, type: asset/resource, generator: { filename: fonts/[name].[ext] } } ] } };这段配置会把字体文件原样拷贝到构建产物的fonts/目录同时把 CSS 里font-face的 url 重写成带哈希的最终路径。注意test正则里的(\?.*)?不能省Font Awesome 4.7.0 的字体路径里带?v4.7.0查询参数webpack 解析时要先剥离掉。在入口文件里直接引入 CSSimport font-awesome/css/font-awesome.min.css;如果你用的是 Vite简单得多把fonts目录放到public/下CSS 用%BASE_URL%fonts/fontawesome-webfont.woff2这类写法或者直接把整个 font-awesome 目录放 public然后link引用。Vite 对相对路径的font-face支持不算好我建议快速集成时用 public 目录方案少踩很多资源解析的坑。4. font-awesome 4.7.0 图标不显示排查方块、乱码和混用的 5 个坑4.1 空心方块字体文件没被加载或 MIME 不对现象页面其他正常所有图标渲染成一个小方框控制台 Network 面板里字体请求状态是 404或者请求成功但Content-Type是application/octet-stream。原因font-face里定义的字体文件路径错了或者服务器没有正确返回字体 MIME。这是 Font Awesome 部署的头号翻车点。解决按第 2.3 节核对 CSS 与 fonts 的相对路径再检查服务器 MIME 配置。用 Nginx 的话gzip_types里也要补font/woff2否则即使字体加载了配合 gzip 也可能出现响应异常。改完后强制刷新浏览器清掉缓存的 404 结果再验证。4.2 方框问号content 码位和字体对不上现象图标显示成带问号的方框或一个奇怪的字符字体请求是 200。原因你把 5.x 的 class 用在了 4.7.0 的 CSS 上比如写了fas fa-user4.7.0 不认识fas伪元素没生效或者写了fa fa-user-circle4.7.0 里有这个 class但它对应的 content 码位在 4.7.0 的字体里没有字形。解决先用浏览器开发者工具选中这个i标签看伪元素content的最终值再打开font-awesome.min.css搜.fa-user-circle:before比对 content 是否一致。不一致说明你引用的 CSS 版本和字体文件版本不是同一套。用 4.7.0 的 CSS 就必须配 4.7.0 的字体文件混一个都不行。这条也是我排查乱码时第一个验证的点。4.3 整体错乱页面同时加载了 4.7.0 和 5.x现象部分图标正常部分图标变成另一种风格有时加了fa-前缀的图标全都变细、不填充。原因页面里同时引入了 font-awesome 4.7.0 和 5.x/6.x 的 CSS。两个版本的font-face都定义了FontAwesome后加载的覆盖先加载的而 5.x 的图标字体编码和 4.x 并不完全兼容。解决同一页面只能保留一个版本。如果确实有第三方组件强制引入了 5.x给 4.7.0 的样式单独包一个作用域比如给页面根节点加classfa4然后手动把 4.7.0 的 CSS 里所有.fa写成.fa4 .fa。注意 4.7.0 的.btn .fa这种组合也要一并处理工作量不如直接统一版本能升级就升级不能升级就尽量隔离。4.4 垂直对不齐FontAwesome 字体参与行高计算现象图标和旁边文字基线差两三个像素尤其在 Bootstrap 3 的按钮和表格里明显。原因FontAwesome 字体本身的 ascender 和 descender 指标不同于系统字体服务端渲染时浏览器按字体指标计算行盒高度。解决给图标设置固定行高并调整垂直对齐i.fa { line-height: 1; vertical-align: -2px; }注意这个调整要对标签自身做不能放在父元素上否则所有文字都跟着变。表格场景里再配合fa-fw一起用基本能压住错位。这块纯属玄学不同操作系统下渲染结果都有差异我用的是 Windows Chrome 和 macOS Safari 双端确认过的值Linux 上差的像素会多一点。4.5 HTTPS 页面里混入 HTTP 字体被浏览器拦截现象本地部署正常一到线上测试环境图标全丢控制台提示Mixed Content。原因老系统经常是反向代理配置不完整页面是 HTTPS但 CSS 里的字体 url 写成了http://现代浏览器默认拦截所有混合内容woff2也在拦截范围内。解决把 font-awesome 目录放到同域下用相对路径引用css/font-awesome.min.css不要写带协议的绝对地址。如果必须从另一个域名加载字体那个域名也要支持 HTTPS并且响应头里的Access-Control-Allow-Origin得允许你的页面来源。这个坑排查起来很隐蔽因为 Network 面板有时只显示一个黄色警告不会标红。5. 从 font-awesome 4.7.0 迁移到 5/6类名映射表与回归验证5.1 类名为什么断4.x 的 .fa 前缀和 5/6 的 family 体系4.7.0 只有一个前缀fa所有图标都写成fa fa-xxx。5.0 之后 Font Awesome 把图标拆成 solid、regular、brands 等几种风格分别用fas、far、fab前缀并且把免费版和 Pro 版的体系彻底分开。这导致大量 4.x 类名在 5/6 里要么改了前缀要么改了名字要么从免费变成了付费。迁移不是把fa fa-替换成fas fa-就完事因为很多图标在 4.x 里用-o后缀表示空心样式在 5/6 里直接用far前缀表达图标名字也变了。典型如fa fa-file-text-o在 4.7.0 里是空心文件加文字5/6 里要写far fa-file-alt。不做映射表直接全局替换迁移完你只会得到满屏方框。5.2 高频类名映射表直接照着改我在多个项目里整理过一份高频对照覆盖后台管理系统的常见场景4.7.0 写法5/6 免费版写法说明fa fa-user-circle-ofar fa-user-circle空心圆头像变 regular 风格fa fa-trash-ofar fa-trash-alt删除按钮空心变细线fa fa-warningfas fa-exclamation-triangle别名在 5/6 中不再可用fa fa-address-book-ofar fa-address-book-o后缀统一去掉fa fa-facebook-officialfab fa-facebook品牌图标进 brands 族fa fa-wechatfab fa-weixin名称改为拼音原名fa fa-calendar-check-ofar fa-calendar-check事件日历类fa fa-reorderfas fa-bars列表排序图标改名fa fa-gearfas fa-cog老别名在 5/6 已移除fa fa-times-circle-ofar fa-times-circle关闭按钮常见写法迁移前先在页面里全局搜索fa fa-把数量统计出来再按这个表格逐项替换。如果你用的图标多建议把整个font-awesome.css里 4.7.0 的 content 映射导出来和 6 的码表做一次程序化比对而不是纯手工改。5.3 批量统计与回归验证迁移不是换 css 就完事迁移过程中最容易漏的是动态渲染的图标类名比如后端接口返回icon: fa fa-user前端直接拼到模板里。这种你替换 HTML 和前端模板都没用得在渲染层做一层映射。我一般先写个脚本把所有老类名从代码里揪出来import re from pathlib import Path # 统计整个项目里出现过的 font-awesome 4.x 类名 pattern re.compile(rfa fa-[a-z0-9-]) found set() for path in Path(templates).rglob(*.html): found.update(pattern.findall(path.read_text(encodingutf-8))) for item in sorted(found): print(item)这个脚本会把templates目录下所有 HTML 模板里的老写法列出来。迁移完成后把 CSS 换成 5/6再跑一遍脚本用之前登记的每一条类名对照映射表检查是否都已经换成fas/far/fab开头。重点看那些没进映射表的名字它们大概率是品牌图标或 Pro 图标免费版里没有对应需要找替代图标。回归验证别只在首页看要专门打开几个带表格、表单、导航的页面截图。图标类名替换后布局不会变但是图标视觉风格从实心变空心或从空心变细线用户感知很明显。截图对比能发现这类细节。6. 给 font-awesome 4.7.0 做子集化一个脚本裁掉用不上的字体6.1 提取 css 里的码位用 Python 生成 pyftsubset 参数老项目可能只用了 675 个图标里的三四十个却要下载完整的woff2字体。如果系统部署在内网字体文件虽然不大但每次改版都要上传到多台服务器还是有点疼。Font Awesome 4.7.0 的字体可以用pyftsubset裁剪。先把 CSS 里用到的码位提取出来import re from pathlib import Path css_path Path(font-awesome.min.css) css css_path.read_text(encodingutf-8) # 匹配 .fa-icon-name:before { content: \fxxx; } pattern re.compile(r\.fa-([a-z0-9-]):before\s*\{\s*content:\s*\\f([0-9a-f]), re.I) unicodes sorted({int(code, 16) for _, code in pattern.findall(css)}) # 输出给 pyftsubset 用的参数格式 print(,.join(fU{code:04X} for code in unicodes))然后安装 fonttools 并执行子集化pip install fonttools[woff] pyftsubset fontawesome-webfont.ttf \ --unicodesUf000,Uf001,Uf013,Uf030 \ --flavorwoff2 \ --output-filefontawesome-webfont.subset.woff2--unicodes参数来自上面 Python 脚本的输出只保留实际声明了伪元素的码位--flavorwoff2指生成 woff2 格式。注意我这里示例只写了 4 个码位实际要用脚本输出的完整列表。6.2 替换字体并核对在用图标生成的fontawesome-webfont.subset.woff2替换原字体文件时要把 CSS 里font-face的 url 改成这个文件其余逻辑不用动。验证方法很直接写一个页面把项目里用到的所有fa fa-xxx列出来对照静态页面检查每个图标是否还正常显示。这个技巧最大的价值在于让 4.7.0 这种老资源在带宽受限的内网环境里跑得更轻。我第一次这么干是在一个审批系统上字体文件从原来的两百多 KB 降到不到三十 KB部署包明显变小。但要注意如果模板里用content拼接图标码位比如后台上传富文本里直接写了#xf013;这种做法绕过了 CSS class子集化会把它们裁掉。所以执行前先全局搜索#x和content:的硬编码码位确认它们都落在提取结果里。做子集化这类优化时我养成了一个习惯把裁完的字体和原字体都留在部署包内CSS 默认引用子集版出问题能立刻切回完整版。它算是给老项目的一颗后悔药省得在深更半夜的线上故障里重新上传字体。希望帮到你。本文还有配套的精品资源点击获取