企业官网建设流程全解析

简介：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-face声明，它通过相对路径../fonts/去找字体文件。这意味着你不能只把 CSS 文件拷走，必须保持css/和fonts/的相对位置关系，否则图标会全部变成方块。

2.2 传统 HTML 项目的接入步骤

对于没有构建工具的纯静态项目，接入方式就是两步：引入 CSS，然后用<i>或<span>标签加类名。

<!-- 在 <head> 中引入，注意路径要指向你实际存放的位置 --> <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css"> <!-- 基础用法：fa 是基础类，fa-search 是图标类 --> <i class="fa fa-search"></i> <!-- 带尺寸的用法：fa-lg / fa-2x / fa-3x / fa-4x / fa-5x --> <i class="fa fa-user fa-2x"></i> <!-- 固定宽度：fa-fw，用于导航栏对齐 --> <i class="fa fa-home fa-fw"></i> <!-- 旋转动画：fa-spin --> <i class="fa 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。我整理了一份高频图标对照表，省得你每次都要翻官方文档。

注意：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 class="fa fa-camera-retro fa-lg"></i> <i class="fa fa-camera-retro fa-2x"></i> <i class="fa fa-camera-retro fa-3x"></i> <i class="fa fa-camera-retro fa-4x"></i> <i class="fa fa-camera-retro fa-5x"></i> <!-- 旋转与翻转 --> <i class="fa fa-shield fa-rotate-90"></i> <!-- 旋转90度 --> <i class="fa fa-shield fa-rotate-180"></i> <!-- 旋转180度 --> <i class="fa fa-shield fa-rotate-270"></i> <!-- 旋转270度 --> <i class="fa fa-shield fa-flip-horizontal"></i> <!-- 水平翻转 --> <i class="fa fa-shield fa-flip-vertical"></i> <!-- 垂直翻转 --> <!-- 堆叠：fa-stack 容器 + fa-stack-1x/2x 控制层级 --> <span class="fa-stack fa-lg"> <i class="fa fa-square-o fa-stack-2x"></i> <!-- 底层，放大2倍 --> <i class="fa 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:Key="FontAwesome">/YourAssembly;component/fonts/#FontAwesome</FontFamily> </Window.Resources> <!-- 第二步：用 TextBlock 显示图标，&#xf002; 是 fa-search 的码点 --> <TextBlock FontFamily="{StaticResource FontAwesome}" Text="&#xf002;" FontSize="24" Foreground="Gray"/> <!-- 带旋转动画的加载图标 --> <TextBlock FontFamily="{StaticResource FontAwesome}" Text="&#xf110;" FontSize="32"> <TextBlock.RenderTransform> <RotateTransform x:Name="SpinnerRotate" CenterX="16" CenterY="16"/> </TextBlock.RenderTransform> <TextBlock.Triggers> <EventTrigger RoutedEvent="Loaded"> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetName="SpinnerRotate" Storyboard.TargetProperty="Angle" From="0" To="360" Duration="0:0:1" RepeatBehavior="Forever"/> </Storyboard> </BeginStoryboard> </EventTrigger> </TextBlock.Triggers> </TextBlock>

逻辑说明：WPF 加载字体用的是FontFamily的 URI 格式，/YourAssembly;component/fonts/#FontAwesome里#后面跟的是字体的内部名称，不是文件名。是 XML 实体写法，对应 Unicode 码点 U+F002。每个图标的码点可以在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 class="fa 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或者，前者是 JavaScript 的转义方式，后者是 HTML 实体，在 CSS 里都不认。CSS 只认\f002这种十六进制转义，而且分号不能漏。

从那以后我每次做图标按需打包，都会在编译后随手 grep 一下content:的数量，确认和预期引入的图标数一致，再丢到测试页面过一遍。这个习惯帮我省过好几次「上线后发现某个图标没打进去」的后悔药。希望帮到你。

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