简介Font Awesome 4.6.3 资源包是面向网页设计师与前端开发者的经典图标库版本适合需要为网站或 Web 应用快速配置矢量图标、统一界面视觉风格的项目。压缩包共包含37个文件其中css样式文件可直接外链使用less/scss源码便于定制变量与按需编译woff/ttf/eot/woff2及svg文件则覆盖了现代浏览器和精细矢量输出的场景整个压缩包仅587KB轻量易部署。该版本支持用CSS类名和Unicode两种方式调用图标并内置社交网络、通用操作、方向指示、商业等类别图标可实现堆叠、旋转翻转、CSS3动画以及响应式缩放等效果。当前已有795人学习下载对维护旧版项目、学习图标字体机制或快速搭建原型的开发者都很有价值。包内还包含HELP-US-OUT说明文件与清晰的目录结构能帮助使用者快速理解样式、字体与预处理源文件之间的对应关系减少自行检索和整理的时间。 上手一个老项目发现页面里用了 font-awesome 4.6.3但本地工程目录里只有一个font-awesome.min.css打开页面图标全成了方框。去网上找资源包要么是 5.x 的新版链接要么下载下来缺 fonts 目录踩了一圈坑才把图标给救回来。这里把 font-awesome 4.6.3 资源包的下载、部署、使用到排障的完整过程整理出来给同样在维护老项目的朋友省点时间。很多刚接触前端开发的朋友可能不理解为什么 2024 年了还在用 2016 年发布的 4.6.3这其实是个非常现实的问题大量已经上线运行多年的后台管理系统、CMS 模板、旧版企业官网用的都是 font-awesome 4.x 系列。4.6.3 是 4.x 的最终维护版本修复了此前的兼容性问题字体文件齐全CSS 结构稳定在没有强需求的情况下业务方一般不愿意为图标库升级去承担回归测试的成本。这篇内容适合正在维护老项目的前端开发、需要给旧系统做样式修复的运维人员以及刚接触 font-awesome 想了解版本差异的初学者。1. 为什么还在用 4.6.3老版本图标库的现实价值1.1 4.6.3 在 font-awesome 版本线中的位置Font-awesome 从 4.0 开始进入图标字体时代到 4.6.3 时功能已经非常成熟。4.6.3 发布于 2016 年 5 月是 4.x 系列的收官版本包含 634 个图标具体数量以官方 font-awesome.css 中定义的字符映射为准。之后的 5.0 于 2018 年发布采用了全新的 5 层 CSS 结构类名体系全部重构从fa fa-xxx变成了fas fa-xxx或far fa-xxx。这意味着什么意味着 4.x 的页面不能直接升级到 5.x如果硬升级所有 HTML 中的图标标签都要改还要在头部额外加载 Web Fonts 和 Solid 等附加字体文件。对于几千个页面的老系统来说这种改动量会让项目排期直接失控。所以 4.6.3 在真实项目里反而成了一个稳妥的选择它稳定、轻量、无兼容性问题而且网络上相关的资料和解决方案最丰富。1.2 适合使用 4.6.3 的典型项目场景我整理了几个常见的适用场景方便你判断自己手上的项目是不是属于这一类依赖 Bootstrap 3.x 的后台管理模板如 AdminLTE 2.x、H、inspinia 等这些模板内置的 font-awesome 版本就是 4.6.3。使用第三方富文本编辑器 如 UEditor、wangEditor 3.x编辑器内部引用的图标资源需要配套已上线的生产环境页面中直接以fa fa-xxx形式硬编码了大量图标改造成本过高。企业内部系统运行在离线内网环境需要把资源包完整部署在本地服务器。这些项目的核心诉求不是用上最新版而是保持现状且运行正常。这时一份完整的 4.6.3 资源包就是必需品。2. 资源包结构与下载实操别只拿一个 CSS 就跑2.1 资源包内到底该有哪些文件font-awesome 4.6.3 和 5.x/6.x 有一个非常大的区别5/6 版本拆分成了 Web Fonts 和 Free 两个目录而 4.6.3 整个包就是一个独立的font-awesome-4.6.3文件夹。第一次下载的朋友可能被各种分享链接搞晕。这里我直接给你一个标准的资源包结构font-awesome-4.6.3/ ├── css/ │ ├── font-awesome.css │ ├── font-awesome.min.css │ └── font-awesome.min.css.map ├── fonts/ │ ├── FontAwesome.otf │ ├── fontawesome-webfont.eot │ ├── fontawesome-webfont.svg │ ├── fontawesome-webfont.ttf │ ├── fontawesome-webfont.woff │ └── fontawesome-webfont.woff2 ├── less/ │ ├── font-awesome.less │ ├── variables.less │ ├── mixins.less │ ├── path.less │ └── core.less └── scss/ ├── _bordered-pulled.scss ├── _core.scss ├── _fixed-width.scss ├── _icons.scss ├── _larger.scss ├── _list.scss ├── _mixins.scss ├── _path.scss ├── _rotated-flipped.scss ├── _stacked.scss ├── _variables.scss ├── font-awesome.scss └── ...重点说下各个目录的作用css/目录最终在页面中引用的样式文件。生产环境用font-awesome.min.css开发调试阶段用未压缩的font-awesome.css更方便查错。fonts/目录核心资源。字体文件是图标能正确显示的根本任何一个字体格式缺失在某些浏览器或操作系统上就可能出现图标无法渲染的问题。less/和scss/目录供使用 CSS 预编译器的项目引用可以通过修改变量来修改字体路径或图标前缀定制化程度高普通页面用不到这两个目录。这里要特别强调一点网上有些下载站给的所谓 font-awesome 4.6.3 资源包 只有一个 css 文件没有 fonts 目录这种包是不能用的。缺少字体文件后页面会显示空白或方框。2.2 可靠的下载途径与文件校验下载 font-awesome 4.6.3 资源包时我一般不推荐去第三方下载站碰运气那些站点要么捆绑下载器要么压缩包内文件不全。最稳妥的方式是走官方渠道的旧版本入口。值得注意的是font-awesome 官方已将 4.x 版本归档到 旧版本 页面进入官网后点 Version 4.7.0 旁的旧版本下拉列表可以找到 4.6.3 的下载地址。如果你访问官网不便也可以到代码托管平台的 releases 页面找4.6.3标签下载对应的源码包同样可用。下载完成后建议检查一下压缩包的大小和结构完整性一个正常的font-awesome-4.6.3.zip压缩包约在 550KB 左右解压后完整目录大小约 1.9MB。如果压缩包只有几十 KB那肯定有问题。严谨一点的话可以校验压缩包的 MD5/SHA1 值不过对大多数使用场景来说保证fonts/目录和css/目录都完整且能对应上就已经排除了绝大部分问题。2.3 本地化部署彻底告别 CDN 失效的坑部分老项目之前是通过 CDN 引用的 font-awesome。这种方式的优点是省服务器空间、加载速度快缺点也很明显如果 CDN 域名到期、被劫持或出现网络封锁页面上的图标就会全部阵亡。而且内网环境无法访问外网 CDN 时整个系统的图标都会消失。所以我一直建议生产环境用本地部署。本地部署的步骤很简单把解压后的font-awesome-4.6.3整个目录放到项目的静态资源根目录下比如static/vendor/font-awesome/。在页面头部引入 CSSlink relstylesheet hrefstatic/vendor/font-awesome/css/font-awesome.min.css确认 CSS 文件中的字体路径是相对路径。4.6.3 的 CSS 默认是../fonts/fontawesome-webfont.woff2这种写法所以只要 fonts 目录和 css 目录的相对位置不变就无需修改任何配置。有朋友喜欢把 CSS 文件复制到自己的样式目录下只拷贝font-awesome.min.css到css/根目录结果字体全部 404这是因为 CSS 中../fonts/的相对路径指向的是上一级目录的fonts/此时就找不到字体了。如果执意要改目录结构那就必须打开 CSS 文件全局搜索url(../fonts/并修改为实际路径这一步很容易被忽略。3. 字体加载原理与性能优化图标是怎么画出来的3.1 font-face 的工作机制与四种字体格式的用途font-awesome 的核心机制是font-face。在 4.6.3 的font-awesome.css文件最开始你可以看到一段这样的代码font-face { font-family: FontAwesome; src: url(../fonts/fontawesome-webfont.eot?v4.6.3); src: url(../fonts/fontawesome-webfont.eot?#iefixv4.6.3) format(embedded-opentype), url(../fonts/fontawesome-webfont.woff2?v4.6.3) format(woff2), url(../fonts/fontawesome-webfont.woff?v4.6.3) format(woff), url(../fonts/fontawesome-webfont.ttf?v4.6.3) format(truetype), url(../fonts/fontawesome-webfont.svg?v4.6.3#fontawesomeregular) format(svg); font-weight: normal; font-style: normal; }这段代码定义了字体族FontAwesome并按照浏览器支持情况依次加载不同格式的字体文件。eot格式主要是为了兼容旧版 IE 浏览器woff2和woff是当前主流浏览器的主流格式ttf用于旧版 Safari 和 Android 系统svg格式现在已经很少用到。所以在部署时不要为了省空间只保留其中一两个格式网上有些精简教程只让你保留 woff 和 woff2这在某些老浏览器上会出问题。每个图标在字体文件中其实对应一个字符编码。以fa-home为例.fa-home:before { content: \f015; }HTML 中使用i classfa fa-home/i时CSS 的:before伪元素会把\f015这个字符渲染出来而FontAwesome字体定义了该字符对应的图标图形一所小房子。这就是字体图标的本质图标不再是图片文件而是字体里的一个字。3.2 引用 CSS 的两种方式与版本号细节我们常见到两种引用方式。一种是官方推荐的完整写法link relstylesheet hrefpath/to/font-awesome/css/font-awesome.min.css另一种是在 link 的 href 后加?v4.6.3link relstylesheet hrefpath/to/font-awesome/css/font-awesome.min.css?v4.6.3加?v4.6.3是为了解决浏览器缓存问题。当页面更新或字体文件变化时版本号改变会促使浏览器重新请求 CSS 文件避免缓存了旧版本导致图标异常。实际项目中这个细节很有价值尤其是发布新版本后用户浏览器还停留在旧缓存时各种图标错乱的问题会频繁出现。3.3 字体加载优化首页图标渲染更快的两个策略如果页面是重图标型页面比如后台菜单、数据看板图标数量往往在几十个甚至上百个。默认加载整套 FontAwesome 字体文件woff2 约 70KBwoff 约 95KB对带宽的影响其实很小真正影响体验的是首屏渲染时的阻塞。这里有两个我在实践中常用的优化手段。第一个是子集化。如果项目里只用到了十个图标完全可以把字体文件裁剪到只包含这几个字符。用 fonttools 的pyftsubset工具可以轻松完成。命令示例pyftsubset fontawesome-webfont.woff2 \ --unicodesf015,f0f4,f010,f0c9 \ --output-filefontawesome-subset.woff2子集化后字体文件可能从 70KB 压缩到 5KB 以内效果显著。但注意后续新增图标时需要重新生成维护成本较高适合图标使用极其固定且对性能要求苛刻的场景。第二个是预加载关键字体文件。在 HTML 的 head 区域加上link relpreload hrefpath/to/fonts/fontawesome-webfont.woff2?v4.6.3 asfont typefont/woff2 crossorigin这样浏览器会在解析到 CSS 之前就提前下载字体文件避免字体加载造成图标短暂消失或闪烁FOUT 现象。这个手段简单有效且不影响维护成本比较推荐优先使用。4. 常见问题排查图标显示异常别急着重装4.1 图标显示为方框或什么都不显示这是最典型的问题。图标渲染成空方框说明页面的 CSS 已经加载但浏览器没有找到匹配的字体文件。先确认网络面板中字体文件请求的状态码状态码原因解决方案200正常加载检查 CSS 类名是否正确404字体文件路径错误核对 fonts 目录和 css 目录的相对位置403服务器禁止访问字体文件检查 Nginx/Apache 静态资源权限配置(空)请求未发出检查 CSS 是否被正确引用206部分内容一般正常无需处理最常见的是 404也就是 CSS 里写的../fonts/路径和实际上fonts/目录的位置对不上。还有一个容易忽略的点某些服务器对woff、woff2、ttf等字体文件格式没有配置 MIME 类型导致浏览器拒绝渲染。Nginx 需要在nginx.conf中加types { font/woff2 woff2; font/woff woff; application/vnd.ms-fontobject eot; application/font-sfnt ttf; image/svgxml svg; }如果是 Apache则需要把AddType font/woff2 .woff2等配置写进.htaccess中。4.2 图标显示为问号或其他乱码字符如果图标区域显示为一个问号或奇怪的字符说明字体文件是加载成功了但 CSS 中content的编码值与该字体文件不匹配。这种情况多发生在乱拼接的场景你的 CSS 来自 A 版本的 font-awesome但 fonts 目录来自 B 版本的 font-awesome。比如 CSS 用的是 4.7.0fonts 用的是 4.6.3后添加的图标类名就会映射错误。解决思路很直接确保css/目录和fonts/目录来自同一个压缩包不要混合版本。判断版本时可以看 CSS 文件开头font-face中?v后面的数字以及字体文件的修改时间两者应该与压缩包内一致。4.3 图标能显示但样式不对颜色、大小、对齐异常4.6.3 的字体图标继承父元素的字体大小和颜色这是它的设计特性。如果图标颜色不对检查父元素的color属性如果图标大小不对检查font-size。常见误区是有人试图给.fa设置width和height来调整大小这在字体图标里是无效的因为字体图标本质上是一个字符不是图片。正确做法是使用内建类调整i classfa fa-home fa-lg/i !-- 放大 1.33 倍 -- i classfa fa-home fa-2x/i !-- 2 倍大小 -- i classfa fa-home fa-3x/i !-- 3 倍大小 --对齐问题一般表现为图标在按钮里歪了或者顶格这通常是行高line-height不一致导致的。如果项目自身的 CSS 对i标签设置了全局的line-height或margin需要有针对性的覆盖。4.4 内网环境下载字体被拦截某些信息安全要求高的内网环境会拦截woff、ttf等字体文件的传输导致内网部署的 font-awesome 图标全部消失。遇到这种情况一个变通方案是把字体文件转成 base64 嵌入到 CSS 中。流程是用 base64 编码字体文件以woff为例体积相对较小base64 -w 0 fontawesome-webfont.woff font_woff_base64.txt把编码后的字符串粘贴到 CSS 中font-face { font-family: FontAwesome; src: url(data:font/woff;charsetutf-8;base64,d09GRgABAAAA... ) format(woff); font-weight: normal; font-style: normal; }这样就不存在单独的字体文件请求自然也就没有传输被拦截的问题。但代价是 CSS 体积会变大不少一个嵌入后的 CSS 文件可能要 200KB 以上。考虑到这是内网环境速度影响可以接受。这个方案在做离线系统集成时特别有用。5. 资源包扩展按需裁剪与视觉适配5.1 只保留需要的图标裁剪方案与维护建议如果你负责的项目确实只需要少数几个图标可以选择裁剪方案。我上面提到用pyftsubset子集化字体这里补充一个完整操作流程。以 Linux/macOS 环境为例先确认 Python 环境已安装 fonttoolspip install fonttools brotli找到需要保留图标的 Unicode 编码。在css/font-awesome.css中搜索对应类名grep -n fa-home css/font-awesome.css返回结果会包含content: \\f015记下f015。执行子集化pyftsubset fonts/fontawesome-webfont.woff2 \ --unicodesf015 \ --output-filefontawesome-webfont.min.woff2把生成的子集文件放回 fonts 目录替换掉原文件。同时把 CSS 中不需要的类名定义全部移除。需要注意裁剪后如果后续业务需要新图标必须重新走一遍流程。建议在项目文档里维护一个图标清单注明使用了哪些fa-xxx类名避免以后忘了当初为什么裁剪。5.2 修改图标颜色、描边与堆叠效果font-awesome 4.6.3 的几个内置视觉效果类在实际项目中很实用。比如fa-stack可以把两个图标叠加组合成一个复合图标span classfa-stack fa-lg i classfa fa-circle-o fa-stack-2x/i i classfa fa-twitter fa-stack-1x/i /span这在做圆形社交图标时非常方便不需要额外切图。另一个是fa-border给图标加边框适合做强调展示。fa-pull-left和fa-pull-right则可以让图标浮动在文字两侧用于段落引用场景。需要注意的是4.6.3 的fa-stack-2x和fa-stack-1x是通过百分比放大实现的如果叠加的图标本身尺寸元素比较多在部分低版本 Android 浏览器上有轻微错位风险兼容性要求高的话建议用固定尺寸的容器加 flex 布局替代。6. 从 4.6.3 看 font-awesome 版本迁移路径6.1 4.x 与 5.x/6.x 的关键差异font-awesome 5.x 和 6.x 在架构上做了很大调整最明显的区别是 4.6.3 中统一的fa fa-xxx变成了三种风格前缀fasSolid、farRegular、fabBrands。同时免费版和付费版Pro的图标数量差距拉大5.x 免费版有 1500 图标6.x 免费版有 2000 图标而 4.6.3 只有 634 个。如果你打算迁移到 6.x不能只是简单地把fa fa-xxx替换成fas fa-xxx因为不同版本中同一个类名对应的图标可能完全不同。典型例子是fa-home在 6.x 中变成了fa-solid fa-house类名语义都不一样了。还有图标去重、别名、商业授权等问题。即使技术上完成了替换也需要经过一轮严格的视觉回归测试否则可能页面上的某些图标悄悄换了含义。6.2 老项目建议保持 4.6.3 的三个理由先说结论除非有明确需求否则老项目不建议轻易升级。原因有三第一4.6.3 与 Bootstrap 3.x 生态搭配非常成熟大量开源后台模板直接内置了 4.6.3改动风险小。第二4.6.3 的字体加载逻辑简单一个 CSS 文件加上一个 fonts 目录就能工作而 5.x 需要同时加载多个字体文件离线部署时文件更多出错概率更高。第三4.6.3 的图标设计风格统一、视觉稳重没有 5.x 中部分图标过度偏平化的问题在政务、企业系统的老设计中视觉过渡更自然。我个人在实际项目中的做法是老项目继续用 4.6.3新项目则优先考虑最新版。图标库不是越新越好而是要看整体项目处于哪个生命周期。6.3 如果一定要迁移最低成本的过渡方案如果确实因为新需求导致必须使用新版图标库比如需要某个 5.x/6.x 才有的图标有一个过渡方案在保留 4.6.3 的基础上单独引入一个新版本的替代字体或者使用在线 CDN 加载新图标子集。你可以只下载新版本图标库中你需要的个别图标通过调整 CSS 类名使其在页面中显示。这相当于做了一个局部兼容层不需要把所有图标批量替换。具体操作是从 6.x 的图标列表中选定所需图标复制对应 Unicode 编码把字体文件用子集化裁剪后单独引到页面中然后写一段自定义 CSS把新图标的字体家族指向新字体如.fa-new-house:before { font-family: NewFontAwesome; content: \f015; }这样新旧体系共存过渡成本最低但也意味着你要维护一套自定义类名映射表。建议只在少量必要图标时采用否则维护成本会反过来拖累项目进度。最后再分享一个小细节。有时 font-awesome 4.6.3 的图标在 Chrome 中正常但在 Firefox 和旧 Edge 中显示异常先别怀疑资源包问题检查一下页面中是否有全局样式的font-family覆盖了.fa的字体设置。4.6.3 的.fa类中默认设置了font-family: FontAwesome但如果你在页面底部又定义了i { font-family: Arial; }图标的字体设置被覆盖自然就渲染不出正确图形。这类问题加一个更高优先级的.fa { font-family: FontAwesome !important; }即可解决。本文还有配套的精品资源点击获取