企业官网建设流程全解析

简介：Font Awesome 4.7.0 是一套应用广泛的矢量图标字体库，面向网页设计师与前端开发者，内置470个覆盖社交网络、界面元素和通用对象的图标，以Web字体方式替代传统图片，解决图标缩放失真、配色受限和分辨率适配难题，特别适合响应式设计与需要统一视觉风格的项目。压缩包共37个文件，整体仅654KB，包含14个less与14个scss源文件供Sass/LESS项目自定义，2个css样式表可直接引用，并提供woff2、woff、ttf、eot、svg、otf六种字体格式以兼容不同浏览器，另附使用说明文档。实际使用时只需在HTML元素中写入fa fa-search这类类名即可渲染图标，配合fa-lg、fa-2x、fa-3x可自由控制尺寸，利用fa-flip-horizontal、fa-flip-vertical实现水平或垂直翻转，兼具轻量与灵活特性。该版本在上一版基础上新增图标、优化设计并修复已知问题，已有946人浏览学习，对于需要统一视觉风格、追求跨端兼容效果的前端项目来说，这套字体库能显著提升开发效率。

1. 还在用 font-awesome 4.7.0：不是情怀，是它真的能打

接到过不少「图标全变方块」的工单，最后查出来都是同一个原因：项目里混用了两个大版本，4.7.0 的fa fa-xxx和 5.x/6.x 的fas fa-xxx一起出现，CSS 互相覆盖，字体文件加载错位，页面直接翻车。font-awesome 4.7.0 是 FA4 系列的最后一个版本，之后官方彻底重构了图标体系和类名规则。这个版本最大的特点是零依赖：一份 CSS 加六个字体文件，连一行 JavaScript 都不用写，老浏览器也认。适合维护存量项目、做静态原型、搭后台管理界面的人，尤其适合跟 Bootstrap 3 搭配使用。它没有 5.x 那些花哨的轻量/实心/品牌前缀，但恰恰是这种克制，让它在十几年后的今天依然稳定。

2. 先拆目录再上手：fonts 与 css 谁才是带坑的那一半

解压安装包之后，千万别急着把整个文件夹扔进项目。我一般会先看一眼目录结构，确认哪些文件必须上线、哪些可以删掉。这个版本的目录比 5.x 干净得多，但正因为文件少，很多人反而忽略了字体文件的加载路径。

2.1 目录结构：六个字体文件各干各的活

用终端看一眼实际结构：

tree font-awesome-4.7.0

常见输出是这样的：

font-awesome-4.7.0/ ├── css/ │ ├── font-awesome.css │ ├── font-awesome.min.css │ └── font-awesome.css.map ├── fonts/ │ ├── FontAwesome.otf │ ├── fontawesome-webfont.eot │ ├── fontawesome-webfont.svg │ ├── fontawesome-webfont.ttf │ ├── fontawesome-webfont.woff │ └── fontawesome-webfont.woff2 ├── less/ ├── scss/ └── README.md

关键就两处：css目录下的样式文件，fonts目录下的字体文件。less和scss是给要改源码的人准备的，纯引用用户用不到；FontAwesome.otf是桌面安装用的，网页里也用不到；svg字体文件在现代浏览器里已经不推荐使用，但 IE8 时代还指望它，所以官方没删。我的习惯是线上只保留css/font-awesome.min.css和fonts里的 eot、woff2、woff、ttf 四个文件，能省掉差不多一百多 KB 的请求体积。font-awesome.css和.min.css的区别只有一个压缩，内容完全一致，调试用未压缩版，上线用压缩版。

2.2 引入方式：本地路径与公共 CDN 的取舍

引入方式决定了后续踩坑的方向。本地引入，路径必须跟 CSS 实际位置对齐。我的项目结构通常是assets目录下平铺：

<link rel="stylesheet" href="assets/font-awesome/css/font-awesome.min.css">

这里的href是相对路径，浏览器会拿它拼出字体请求地址：assets/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0。如果你把 CSS 放到别处、字体文件放到另一个目录，就要打开 CSS 源码手动改url()里的相对路径。

公共 CDN 引入则要锁死版本号，这是血泪教训：

<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.min.css">

很多公共库 CDN 都保留了4.7.0这个版本路径，引用时要带上完整版本号，不能写latest或省略版本段。原因很简单：一旦 CDN 默认版本被切到 5.x 或 6.x，类名体系变了，页面上的fa fa-home全部失效。版本锁死之后，还要确认 CDN 返回的Content-Type是不是text/css，有些源站配置错误会返回text/plain，浏览器直接拒载，样式连带字体全部丢失。

2.3 @font-face 的加载顺序：为什么 eot 在最前面

4.7.0 的font-awesome.css开头有一段@font-face，这是整个图标库的地基。看清楚它的src排列顺序，很多莫名的字体加载问题都能迎刃而解：

@font-face { font-family: 'FontAwesome'; src: url('../fonts/fontawesome-webfont.eot?v=4.7.0'); src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal; }

这段代码的逻辑说明：浏览器按src列表从上到下挑第一个自己能识别的格式。IE8 只知道eot，而且它解析带?的 URL 有缺陷，所以官方把第一个eot单独写一遍，第二个eot又加了#iefix来骗过 IE 的解析 bug；现代浏览器会跳过 eot，直接选woff2，压缩率最高、加载最快；svg排在最后是给老 iOS Safari 的，但它渲染慢、还会在部分浏览器里引发内存问题，新版浏览器直接忽略。参数?v=4.7.0不是给服务器用的，是给浏览器缓存用的——版本号变了 URL 就变，强制浏览器重新拉取字体文件，避免更新后还在用旧缓存。

3. 图标调用原理与实用写法：双类名机制和伪元素

4.7.0 里写图标要用两个类名，<i class="fa fa-home"></i>。新手往往只写fa-home，结果图标出不来。这背后是 CSS 的一条核心设计：fa管字体族和排版，fa-home管具体字符编码。理解了这个，你就能自由扩展图标用法，而不是死记每一个类名。

3.1 fa 与 fa-xxx 的分工：一个管字体，一个管内容

打开font-awesome.css，找到.fa的基础定义：

.fa { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

再看任何一个图标的定义，比如房子图标：

.fa-home:before { content: "\f015"; }

逻辑说明：.fa声明元素的字体是FontAwesome，告诉浏览器把这段文字按图标字体渲染；.fa-home通过:before伪元素写入一个十六进制字符\f015，这个字符恰好对应字体文件里的房子轮廓。两段 CSS 缺一不可——没有fa，字符会显示成方块或普通文字；没有fa-home，伪元素没有内容，什么都渲染不出来。

这个机制也解释了为什么fa类可以用在任意标签上。我经常直接在按钮上写类名：

<button class="btn btn-primary fa fa-download"> 下载</button>

注意按钮里有个空格再加文字，因为伪元素本身占用一个字符位，不加空格文字会贴着图标。参数说明：14px/1表示默认字号 14px、行高 1 倍，font-size: inherit表示图标大小跟随父级字号，所以给父容器加font-size: 20px，图标会自动变大，这比单独给i元素设字号更省事。

3.2 把图标写进按钮和输入框：伪元素的三种落地姿势

最顺手的写法是用<i>标签配合文本：

<a class="btn btn-default" href="#"> <i class="fa fa-trash-o"></i> 删除 </a>

逻辑说明：fa-trash-o在 4.7.0 里是细边框的垃圾桶，5.x 之后改成了far fa-trash-alt，如果你从老项目迁移到新版本，这种类名差异是最容易翻车的地方。按钮里加图标的核心收益是视觉锚点，用户扫界面时先看到图形再读文字。

第二种常见姿势是输入框前缀图标，我一般配合 Bootstrap 的.input-group：

<div class="input-group"> <span class="input-group-addon"><i class="fa fa-search"></i></span> <input type="text" class="form-control" placeholder="搜索"> </div>

这里input-group-addon是 Bootstrap 3 的类名，把图标固定在输入框左侧。要注意fa fa-search里的inline-block会让伪元素参与布局，如果出现图标和输入框垂直错位，给span加一个line-height和输入框高度一致即可。

第三种是纯 CSS 引用，比如给空列表加提示图标：

.empty-tip:before { font-family: 'FontAwesome'; content: "\f0c7"; margin-right: 6px; color: #999; }

逻辑说明：这种写法不依赖fa类，自己手动声明font-family和content。适合后端模板不方便加多余标签的场景。参数说明：\f0c7是保存按钮的图标编码，换其他图标只需要查下面的对照表改编码，不用改 DOM 结构。

3.3 常用图标 Unicode 对照：拿到编码就能定制样式

4.7.0 的全部映射关系在 CSS 源码里都能查到，格式统一是content: "\fxxx"。我把使用频率最高的几个列出来：

这张表的实际价值在于：当你需要把图标嵌进一些不支持 HTML 的环境（比如 Canvas 绘制、后端模板变量拼接），可以直接用content值手写。我做过一个导出 PDF 的功能，表格里的状态列就靠这段映射把图标文字拼进单元格，渲染出来完全一致。

4. 避坑指南：四个必踩的坑与排查顺序

4.7.0 用起来简单，但恰恰因为简单，出了问题反而难定位。我把这些年攒下的翻车现场整理成四个坑位，每个都按「现象 → 原因 → 解决」给你交代清楚。

坑位一：页面出现方块豆腐块

现象：页面加载完，本该显示图标的位置全部变成空心或实心小方块，有时伴随文字乱码。

原因：要么font-family没生效，要么字体文件根本没加载。最常见的是 CSS 引用到了font-awesome.css，但fonts目录没跟着上传，或者路径写错；其次是项目里另一个 CSS 覆盖了.fa的font-family。

解决：打开浏览器开发者工具，切到 Network 面板，刷新页面，筛选Font类型。如果fontawesome-webfont.woff2显示404，就是字体文件路径问题，检查 CSS 源码里url()的相对路径是否对得上实际目录。如果字体请求是200但图标还是方块，在 Console 里执行getComputedStyle(document.querySelector('.fa')).fontFamily，看到的值不是FontAwesome，就说明被覆盖了。用一段带!important的覆盖修复：

.fa { font-family: 'FontAwesome' !important; }

逻辑说明：!important是下策，但能快速止血。根治方式是把覆盖规则找到，一般来自全局重置样式或模板自带的字体族设置。

坑位二：伪元素 content 写了但图标不显示

现象：自己写content: "\f015"的伪元素，页面上什么都没有，或者出现一个字母。

原因：给伪元素声明了content，但没声明font-family: 'FontAwesome'。浏览器默认用普通字体渲染\f015，在普通字体里这个码位通常是空或缺字。

解决：检查伪元素的完整声明，缺的补上：

.my-icon:before { font-family: 'FontAwesome'; content: "\f015"; }

逻辑说明：font-family决定字符从哪个字体文件取形，content决定取哪个码位，两者缺一不可。这也是「玄学」感最强的一个坑——看着代码没问题，实际上就是少一行。

坑位三：CDN 引了 4.7.0，页面却出现 5.x 的图标风格

现象：一部分图标正常，一部分图标显示为「空心新风格」或直接缺字，控制台报字体文件加载失败。

原因：模板里同时引用了两个版本的样式文件。比如头部引了 4.7.0 的font-awesome.min.css，底部又引了 5.x 的all.min.css，后加载的样式把.fa或.fas覆盖了。两个版本的类名规则不同，fa fa-cog和fas fa-cog互相干扰。

解决：全库搜一遍link和@import，把所有font-awesome相关引用统一成一个版本。如果必须保留 5.x 的图标，就整体迁到 5.x，把代码里所有fa fa-前缀改成对应新规则；如果迁不动，把 4.7.0 的引用挪到所有样式最后，让它覆盖生效。命令行排查用：

grep -r "font-awesome" templates/ | grep -E "link|@import"

逻辑说明：-r递归搜索，templates/换成你的模板目录，grep -E过滤出引用语句。这一招能快速定位哪两个文件在打架。

坑位四：图标在 Windows 上发虚，在 macOS 上正常

现象：同一个页面，macOS 上看清晰锐利，Windows 上图标边缘发虚、有锯齿感。

原因：Windows 对svg字体和truetype字体的渲染支持比较差，而 4.7.0 的ttf和svg格式在 Windows 上触发了浏览器的降级渲染。

解决：确保@font-face里woff2和woff排在ttf和svg前面，浏览器会优先选格式。如果已经排对了还发虚，把svg那行从src列表里删掉，或者把-webkit-font-smoothing: antialiased换成grayscale试试。多数场景下把svg移除就能缓解，因为现代浏览器已经不需要它了。

排查顺序我一般固定走：先看 Network 面板里字体文件是否 200，再看font-family有没有被覆盖，然后查类名前缀是不是混用版本，最后才怀疑渲染问题。顺序不能反，前面三步没排清楚就去调渲染参数，纯属瞎忙。

5. 把 4.7.0 用出进阶感：动画、子集化与加载验证

5.1 用自带的 fa-spin 和 fa-pulse 做加载状态

4.7.0 内置了两个动画类，fa-spin是匀速旋转，fa-pulse是步进旋转。源码里对应一段@keyframes fa-spin，角度终点是359deg而不是360deg，这是为了避免整圈旋转时发生闪烁。我一般会把它们封装成工具类：

.loading-icon { display: inline-block; animation: fa-spin 1s infinite linear; }

逻辑说明：1s是转一圈耗时，linear保证匀速，适合加载提示。fa-pulse则是八步跳转效果，适合「正在处理」的等待态。参数说明：自己封装的类不受fa-spin类名限制，可以加在任意元素上。

5.2 用 fontmin 子集化压缩字体体积

4.7.0 的ttf文件有几十 KB，woff2也不小。如果项目只用十来个图标，可以用fontmin只保留需要的码位，生成一个精简的woff2：

npx fontmin --font fontawesome-webfont.ttf --text "$(grep -o '\\f0[a-f0-9]\\{3\\}' font-awesome.css | tr '\\n' ' ')"

逻辑说明：grep -o从 CSS 里提取所有 content 码位，tr把换行替换成空格，fontmin按码位裁剪字体文件。裁剪后要写一段独立的@font-face指向新字体，并限制只让已裁图标的类名生效。这个操作能给首屏省下几十 KB 请求量，移动端收益明显。

5.3 用 document.fonts.check 验证字体加载完成

字体加载是异步的，页面刚渲染时图标可能还没就位，导致闪一下豆腐块。用标准 API 检测加载状态：

if (document.fonts && document.fonts.check('14px FontAwesome')) { document.body.classList.add('fa-ready'); } else { document.fonts.load('14px FontAwesome').then(function () { document.body.classList.add('fa-ready'); }); }

逻辑说明：check方法验证指定字体是否已加载完成，返回布尔值；load方法主动拉取字体，Promise 完成后再通知页面。配合 CSS 把图标在fa-ready之前设为透明，可以避免加载过程中出现难看的占位字符。

从那以后，我每次接到「图标全方块」的工单，都强制自己走一遍：先看类名前缀，再查字体请求，最后翻浏览器缓存——顺序不能反。4.7.0 是个老资源，但它的稳定和克制反而成了优点，只要把版本锁死、路径对齐、格式排好序，它依然能稳稳地撑起一个后台系统。希望帮到你。

本文还有配套的精品资源，点击获取