简介Font Awesome 4.7.0 是一套面向网页设计师与前端开发者的经典图标字体库以矢量字体替代传统图片图标解决图标在高分屏与响应式布局中缩放失真、适配繁琐的问题。包内共37个文件约654KB包含eot、ttf、woff、woff2、otf、svg等多种字体格式以兼容不同浏览器并配有css样式表、less与scss源码方便直接引入或按需定制。图标以类名方式调用如fa fa-search即可显示搜索图标配合fa-lg、fa-2x等类可调整尺寸fa-flip-horizontal等类可实现翻转覆盖社交、通用对象与界面元素等470个图标。资源还附带图标预览页与使用说明文档便于快速查找与选型。目前已有946人学习下载适合需要轻量、稳定图标方案且对新版本特性需求不高的项目参考使用。1. font-awesome-4.7.0一个被低估的离线图标库为什么还有人专门找它如果你正在维护一套五年前甚至更早的前端项目或者接手了一个用 Bootstrap 3 搭的后台系统大概率会遇到一个尴尬场景想加个搜索图标、删除图标结果发现项目里既没有引入图标字体也没法随便升级到 Font Awesome 5 或 6——因为老版本的类名体系和新版完全不兼容。这时候 font-awesome-4.7.0 这个版本号就会从记忆深处冒出来。它是 Font Awesome 4.x 系列的最后一个稳定版本包含 675 个图标提供 webfont 和 CSS 两套接入方式不依赖任何构建工具解压就能用。适合谁维护遗留系统的前端、做内网离线部署的运维、以及需要给 WPF 或 WinForm 桌面端找矢量图标资源的开发者。下面我从文件结构、接入方式、参数配置到踩坑排查把这份资源拆开讲清楚。2. 拆开 font-awesome-4.7.0 压缩包目录结构与两种接入方式2.1 文件清单与各目录职责拿到 font-awesome-4.7.0 压缩包后解压出来的顶层目录通常包含四个子目录和一个入口文件。很多人直接双击 index.html 看效果但真正要集成到项目里得先搞清楚每个目录是干什么的。目录/文件内容用途css/font-awesome.css、font-awesome.min.css核心样式表定义所有.fa-*类名和font-face规则fonts/fontawesome-webfont.eot/.svg/.ttf/.woff/.woff2五种格式的字体文件覆盖不同浏览器兼容性less/variables.less、mixins.less、path.less等LESS 源文件适合用 LESS 预处理器的项目做定制scss/_variables.scss、_mixins.scss、_path.scss等SCSS 源文件适合 Sass 项目HELP-US-OUT.txt捐赠说明可忽略关键点在于css/font-awesome.css里的font-face声明它通过相对路径../fonts/去找字体文件。这意味着你不能只把 CSS 文件拷走必须保持css/和fonts/的相对位置关系否则图标会全部变成方块。2.2 传统 HTML 项目的接入步骤对于没有构建工具的纯静态项目接入方式就是两步引入 CSS然后用i或span标签加类名。!-- 在 head 中引入注意路径要指向你实际存放的位置 -- link relstylesheet hreffont-awesome-4.7.0/css/font-awesome.min.css !-- 基础用法fa 是基础类fa-search 是图标类 -- i classfa fa-search/i !-- 带尺寸的用法fa-lg / fa-2x / fa-3x / fa-4x / fa-5x -- i classfa fa-user fa-2x/i !-- 固定宽度fa-fw用于导航栏对齐 -- i classfa fa-home fa-fw/i !-- 旋转动画fa-spin -- i classfa fa-spinner fa-spin/i逻辑说明fa这个基础类负责设置font-family: FontAwesome、font-style: normal等全局属性任何图标都必须带上它。fa-search这类图标类通过:before伪元素插入对应的 Unicode 字符。尺寸类fa-2x到fa-5x是直接放大font-size而fa-lg是 1.33 倍。fa-fw把宽度固定为 1.28571429em这在做垂直导航菜单时特别有用能保证图标和文字对齐不跑偏。参数说明如果你用的是font-awesome.min.css文件体积约 30KB比未压缩版小一半以上生产环境优先用 min 版。但如果你需要改图标颜色或尺寸的默认值建议用 LESS 或 SCSS 源文件重新编译而不是直接改 CSS。2.3 用 LESS/SCSS 做定制化编译有些项目需要把 Font Awesome 的字体文件放到 CDN 或者特定的静态资源目录这时候直接改 CSS 里的url()路径很麻烦用源文件编译更干净。// 在项目的 LESS 入口文件中覆盖变量 fa-font-path: /assets/fonts; // 改成你实际的字体目录 fa-css-prefix: fa; // 默认就是 fa一般不用改 // 然后引入 font-awesome 的 less 文件 import font-awesome-4.7.0/less/font-awesome.less;逻辑说明fa-font-path这个变量在less/path.less里被定义为../fonts你在引入之前覆盖它编译出来的 CSS 就会指向新路径。fa-css-prefix允许你把fa前缀改成别的比如icon避免和项目里已有的类名冲突。参数说明SCSS 版本的变量名是$fa-font-path和$fa-css-prefix用法同理。注意 LESS 和 SCSS 目录下的变量文件不要同时引入选一个就行。编译时如果报variable fa-font-path is undefined说明你的import顺序反了必须先定义变量再引入主文件。3. 图标类名怎么查、怎么用从 fa-search 到堆叠图标的完整参数表3.1 类名命名规律与常用图标速查Font Awesome 4.7.0 的类名命名基本遵循fa-{语义}的规则比如fa-search、fa-user、fa-trash、fa-download。但有些图标的名字和直觉不太一样比如删除是fa-trash-o空心垃圾桶和fa-trash实心编辑是fa-pencil而不是fa-edit。我整理了一份高频图标对照表省得你每次都要翻官方文档。场景类名备注搜索fa-search也有fa-search-plus、fa-search-minus删除fa-trash/fa-trash-o-o后缀表示轮廓风格编辑fa-pencil/fa-pencil-square-o后者带方框用户fa-user/fa-user-plus/fa-user-times增删用户场景设置fa-cog/fa-cogs单齿轮和双齿轮加载fa-spinner/fa-circle-o-notch配合fa-spin使用文件fa-file/fa-file-o/fa-file-text文本文件用fa-file-text箭头fa-arrow-left/fa-chevron-rightchevron系列更细注意4.7.0 里没有fa-times-circle的实心版本只有fa-times-circle-o如果你需要实心叉号圆圈得用fa-times-circle加自定义样式或者换用fa-ban。3.2 尺寸、旋转、堆叠的参数配置除了基础图标Font Awesome 4.7.0 提供了一套修饰类可以组合出复杂效果。这些类的参数值都是固定的不能传自定义数值但可以通过 CSS 覆盖。!-- 尺寸从 fa-lg 到 fa-5x -- i classfa fa-camera-retro fa-lg/i i classfa fa-camera-retro fa-2x/i i classfa fa-camera-retro fa-3x/i i classfa fa-camera-retro fa-4x/i i classfa fa-camera-retro fa-5x/i !-- 旋转与翻转 -- i classfa fa-shield fa-rotate-90/i !-- 旋转90度 -- i classfa fa-shield fa-rotate-180/i !-- 旋转180度 -- i classfa fa-shield fa-rotate-270/i !-- 旋转270度 -- i classfa fa-shield fa-flip-horizontal/i !-- 水平翻转 -- i classfa fa-shield fa-flip-vertical/i !-- 垂直翻转 -- !-- 堆叠fa-stack 容器 fa-stack-1x/2x 控制层级 -- span classfa-stack fa-lg i classfa fa-square-o fa-stack-2x/i !-- 底层放大2倍 -- i classfa fa-twitter fa-stack-1x/i !-- 上层正常大小 -- /span逻辑说明fa-rotate-90等类是通过 CSStransform: rotate()实现的fa-flip-horizontal用的是scale(-1, 1)。堆叠效果依赖fa-stack设置相对定位fa-stack-2x把图标放大到 2em 并绝对定位fa-stack-1x保持 1em 居中。堆叠时底层图标通常用fa-square-o或fa-circle-o做背景框。参数说明fa-stack容器必须加fa-lg或更大的尺寸类否则堆叠出来的图标会很小。fa-stack-2x和fa-stack-1x的比例是固定的 2:1如果你想调成 3:1需要自己写 CSS 覆盖font-size。3.3 在 WPF 里用 Font Awesome热词背后的实际方案最近看到不少人在搜「wpf 如何使用 font-awesome」这确实是个高频痛点。WPF 不能直接吃 CSS 类名但可以用字体文件加 Unicode 码点的方式实现。思路是把fontawesome-webfont.ttf作为资源嵌入然后在 XAML 里用TextBlock指定FontFamily和Text为对应的 Unicode 字符。!-- 第一步在 App.xaml 或窗口资源里定义字体 -- Window.Resources FontFamily x:KeyFontAwesome/YourAssembly;component/fonts/#FontAwesome/FontFamily /Window.Resources !-- 第二步用 TextBlock 显示图标#xf002; 是 fa-search 的码点 -- TextBlock FontFamily{StaticResource FontAwesome} Text#xf002; FontSize24 ForegroundGray/ !-- 带旋转动画的加载图标 -- TextBlock FontFamily{StaticResource FontAwesome} Text#xf110; FontSize32 TextBlock.RenderTransform RotateTransform x:NameSpinnerRotate CenterX16 CenterY16/ /TextBlock.RenderTransform TextBlock.Triggers EventTrigger RoutedEventLoaded BeginStoryboard Storyboard DoubleAnimation Storyboard.TargetNameSpinnerRotate Storyboard.TargetPropertyAngle From0 To360 Duration0:0:1 RepeatBehaviorForever/ /Storyboard /BeginStoryboard /EventTrigger /TextBlock.Triggers /TextBlock逻辑说明WPF 加载字体用的是FontFamily的 URI 格式/YourAssembly;component/fonts/#FontAwesome里#后面跟的是字体的内部名称不是文件名。#xf002;是 XML 实体写法对应 Unicode 码点 UF002。每个图标的码点可以在font-awesome-4.7.0/css/font-awesome.css里搜content: \f002找到。参数说明FontSize控制图标大小Foreground控制颜色。旋转动画需要设置RenderTransformOrigin或CenterX/CenterY否则会绕左上角转。如果图标显示成方块检查字体文件的Build Action是否设为Resource以及#后面的字体名是否正确——可以用字体查看器打开 ttf 文件确认内部名称。4. 避坑与排查图标不显示、路径错乱、版本冲突的 5 个血泪经验4.1 图标全是方块或问号现象页面加载后所有i classfa fa-*的位置显示为空心方块或问号。原因字体文件没有正确加载。最常见的是css/和fonts/的相对路径被破坏比如把 CSS 文件单独拷到了assets/css/下但字体文件还在font-awesome-4.7.0/fonts/导致font-face里的url(../fonts/fontawesome-webfont.woff2)解析失败。解决打开浏览器开发者工具的 Network 面板刷新页面看fontawesome-webfont.woff2的请求是不是 404。如果是要么把字体文件按相对路径放好要么用 LESS/SCSS 重新编译并覆盖fa-font-path。另一个可能是服务器没有配置.woff2的 MIME 类型在 Nginx 里加一行application/font-woff2 woff2;即可。4.2 图标和文字基线不对齐现象图标比旁边的文字高出一截或低一截尤其在按钮和导航栏里特别明显。原因Font Awesome 的图标默认vertical-align: middle但不同浏览器的middle计算方式有差异而且如果父元素的line-height不是默认值对齐就会乱。解决给图标加fa-fw固定宽度类或者在 CSS 里显式设置vertical-align: -0.125em这是 Font Awesome 5 的做法4.7.0 可以手动加。如果是按钮里的图标把按钮的line-height设为和height一致图标用vertical-align: middle通常就正了。4.3 和 Bootstrap 的 glyphicon 类名冲突现象项目里同时引入了 Bootstrap 3 和 Font Awesome 4.7.0结果某些图标显示错乱比如.fa的样式被覆盖。原因Bootstrap 3 自带 glyphicon 图标字体它的基础类.glyphicon和 Font Awesome 的.fa都设置了font-family如果两个 CSS 的加载顺序不对后加载的会覆盖先加载的。解决确保 Font Awesome 的 CSS 在 Bootstrap 之后引入。如果还有冲突用 LESS 编译时把fa-css-prefix改成fa以外的前缀比如icon这样类名就变成icon-search彻底避开冲突。4.4 用 CDN 引入后离线环境失效现象开发时用 CDN 链接一切正常部署到内网后图标全部消失。原因内网无法访问外网 CDN而项目里没有本地字体文件。解决把 font-awesome-4.7.0 整个目录拷到项目的静态资源目录改用相对路径引入。如果只想保留必要文件至少需要css/font-awesome.min.css和fonts/下的woff2、woff、ttf三个文件eot和svg是给 IE8 及更早版本用的现代浏览器不需要。4.5 升级到 Font Awesome 5 后类名不兼容现象想把 4.7.0 升级到 5.x结果所有fa fa-search都失效了。原因Font Awesome 5 把基础类从fa拆成了fas实心、far常规、fab品牌图标名称也改了不少比如fa-search在 5 里是fas fa-search但fa-pencil变成了fas fa-pencil-alt。解决如果项目里图标用量不大手动改类名。如果用量大Font Awesome 5 提供了一个fa-v4-shims.css兼容层引入后可以继续用 4.x 的类名但会有少量图标映射不上。最稳妥的做法是保持 4.7.0 不动等整体重构时再统一升级。5. 从 675 个图标里做减法我的图标按需打包与验证习惯Font Awesome 4.7.0 全量 CSS 加字体文件大约 500KB 左右对于现代网络环境不算大但如果你只用了十几个图标完全没必要让用户下载全部字体。我一般会走一遍「按需打包」的流程这里把具体做法和验证方法写出来。5.1 用 LESS 变量做图标裁剪Font Awesome 4.7.0 的 LESS 源文件里每个图标都定义在一个fa-var-*变量里但默认的font-awesome.less会引入icons.less里面包含了全部 675 个图标的类定义。要裁剪不能直接改icons.less而是自己写一个入口文件只引入需要的图标。// custom-fa.less import font-awesome-4.7.0/less/variables.less; import font-awesome-4.7.0/less/mixins.less; import font-awesome-4.7.0/less/path.less; import font-awesome-4.7.0/less/core.less; import font-awesome-4.7.0/less/larger.less; import font-awesome-4.7.0/less/fixed-width.less; import font-awesome-4.7.0/less/list.less; import font-awesome-4.7.0/less/bordered-pulled.less; import font-awesome-4.7.0/less/animated.less; import font-awesome-4.7.0/less/rotated-flipped.less; import font-awesome-4.7.0/less/stacked.less; // 只引入需要的图标 .fa-search:before { content: fa-var-search; } .fa-user:before { content: fa-var-user; } .fa-trash:before { content: fa-var-trash; } .fa-cog:before { content: fa-var-cog; } .fa-spinner:before { content: fa-var-spinner; } .fa-download:before { content: fa-var-download; } .fa-upload:before { content: fa-var-upload; } .fa-check:before { content: fa-var-check; } .fa-times:before { content: fa-var-times; } .fa-arrow-left:before { content: fa-var-arrow-left; }逻辑说明variables.less里定义了所有fa-var-*变量mixins.less提供了.fa-icon()等混合宏。你不需要引入icons.less而是手动写.fa-xxx:before规则每个规则只输出一行content。这样编译出来的 CSS 可能只有几 KB字体文件虽然还是全量但 CSS 体积大幅缩小。参数说明如果你连字体文件也想裁剪那就需要用到 Font Awesome 官方提供的字体子集化工具或者用fonttools手动删减字形。不过 4.7.0 的字体文件本身只有 160KB 左右woff2 格式裁剪的收益不如 CSS 明显我一般只裁 CSS。5.2 验证图标是否生效的三种方法打包完之后怎么确认图标真的能用我习惯走这三步。第一步在浏览器里直接打开一个测试 HTML引入编译后的 CSS写几个i标签看图标是否显示。这是最直观的。第二步用开发者工具的 Elements 面板选中图标元素看::before伪元素的content值是不是你期望的 Unicode 码点。如果content是none或者空说明类名写错了或者 CSS 没引入。第三步在 Network 面板确认字体文件的请求状态是 200并且Type是font。如果字体文件加载了但图标还是方块检查font-face里的font-family名称和 CSS 里.fa设置的font-family是否一致——4.7.0 里都是FontAwesome大小写敏感。5.3 一个容易忽略的细节伪元素 content 的转义在 LESS 里写content: fa-var-search;编译出来是content: \f002;这是正确的。但如果你手写 CSS直接写content: \f002;也没问题。坑在于有些人从网上复制代码时把\f002写成了\uF002或者#xf002;前者是 JavaScript 的转义方式后者是 HTML 实体在 CSS 里都不认。CSS 只认\f002这种十六进制转义而且分号不能漏。从那以后我每次做图标按需打包都会在编译后随手 grep 一下content:的数量确认和预期引入的图标数一致再丢到测试页面过一遍。这个习惯帮我省过好几次「上线后发现某个图标没打进去」的后悔药。希望帮到你。本文还有配套的精品资源点击获取