Font Awesome 字体图标库是基于 css 框架的网页字体图标库,它完全免费。可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用 css 的样式。相信很多网站的用户在使用该字体图标库。
不过，有些用户可能使用的是老版本的，并没有升级到新版本，因此需要升级一下，升级到Font Awesome 4.7.0，以优化网站体验效果。
怎么升级
1. 直接在主题的 header.php 中添加类似的代码：
- <link rel="stylesheet" href="css 文件的地址（本地的或是其他地方的）">
2. 或者使用函数向头部添加上述的代码：
- function add_stylesheet_to_head() {
- echo "<link href='css 文件的地址（本地的或是其他地方的）' rel='stylesheet' type='text/css'>";
- }
- add_action( 'wp_head', 'add_stylesheet_to_head' );
3. Font Awesome 网站给出了他们自己的升级方法，需要引用他们提供的外链，例如：
本文禁止住转载。任何形式转载请联系作者（时光在路上 ｗｗｗ．ｔｉｍｅｚｌｓ．ｃｏｍ）。时光在路上保留所有权利
- 复制 font-awesome 目录到你的项目中
- 在
<head>处加载 font-awesome.min.css 如下：<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
也可以使用 Font Awesome 提供的加速服务：输入自己的邮箱，确认之后会在邮箱中收到类似代码：<script src="https://use.fontawesome.com/your-code.js"></script> 。将此代码放到 <head> 标签最上面引用。这样既可以使用他们提供的 CDN 服务了。
其实，最好的办法还是将 Font Awesome 字库放到自己的网站上面，之后引入 css，免去引用外链的操作。但是问题来了：如果有别的程序或插件也这样向头部引入 css 文件咋整？因此，为了避免这样的错误，需要引入排队机制。使用 wp_enqueue_style() 函数。
本文禁止住转载。任何形式转载请联系作者（时光在路上 ｗｗｗ．ｔｉｍｅｚｌｓ．ｃｏｍ）。时光在路上保留所有权利
主要步骤
1. 把老版本文件夹的字体移除，把新版字体文件复制到老版本文件夹里面。新版本的字体图标库可以到其网站下载，点此处；
2. 把新版字体的 css 文件复制到主题文件夹中。
在下载的文件包中，有如下文件：
本文禁止全文转载。任何形式转载请联系作者（时光在路上 ｗｗｗ．ｔｉｍｅｚｌｓ．ｃｏｍ） Copyright © 2023. All Rights Reserved
其中文件夹 css 中 有两个 css 文件，一个是未压缩的，一个是压缩后的（min），可以自由选择其中一个。
本文禁止无授权转载 - 时光在路上 ｗｗｗ．ｔｉｍｅｚｌｓ．ｃｏｍ 保留所有权利
在 fonts 文件夹中有六个字体文件：
- FontAwesome.otf
- fontawesome-webfont.eot
- fontawesome-webfont.svg
- fontawesome-webfont.ttf
- fontawesome-webfont.woff
- fontawesome-webfont.woff2
这六个文件是我们所需要的，需要复制到自己主题的文件夹中，到底是哪个文件夹中，自己定（例如 自己主题中的 fonts 文件夹），到时候正确引用地址就行了。
3. 在自己主题中的 functions.php 文件中引入 font-awesome.css 文件到 网页头部。
如在下面的函数中：
- function mytheme_style() {
- wp_enqueue_style( 'style', get_stylesheet_uri(), array(), 'your_css_version');
- //。。。 其他代码
- }
- add_action( 'wp_enqueue_scripts', 'mytheme_style' ); // wp_enqueue_scripts 表示在前台加载脚本和 css
添加：wp_enqueue_style( 'font-awesome', get_template_directory_uri() . '/css/font-awesome.css', array(), 'your_fonts_css_version'); ，引入 Font Awesome 的 css，得到：
本文禁止全文转载。任何形式转载请联系作者（时光在路上 ｗｗｗ．ｔｉｍｅｚｌｓ．ｃｏｍ） Copyright © 2023. All Rights Reserved
- function mytheme_style() {
- wp_enqueue_style( 'style', get_stylesheet_uri(), array(), 'your_css_version'); // 此处引入主题 css，名字为 style
- wp_enqueue_style( 'font-awesome', get_template_directory_uri() . '/css/font-awesome.css', array(), 'your_fonts_css_version' ); // 引入字体 Font Awesome 字体 css，名字为 fonts
- //。。。 其他代码
- }
- add_action( 'wp_enqueue_scripts', 'mytheme_style' ); // wp_enqueue_scripts 是在前台加载 css 动作的钩子
解释：
- 当有多个 css 需要加载时，可以通过
wp_enqueue_style()函数排队加载，有三个动作钩子，分别为：- -
wp_enqueue_scripts表示在前台加载脚本或 css - -
admin_scripts表示在后台加载脚本或 css - -
login_enqueue_scripts表示在登录页面加载脚本或 css
我们需要的是在前台加载 css，因此选择
wp_enqueue_scripts。 - -
get_template_directory_uri()用来获得主题目录。
4. 删除原来 style.css 文件中相应的 Font Awesome 相关 css 设置（如果有的话），类似于：
本文禁止全文转载。任何形式转载请联系作者（时光在路上 ｗｗｗ．ｔｉｍｅｚｌｓ．ｃｏｍ） Copyright © 2023. All Rights Reserved
- @font-face {
- font-family: 'FontAwesome';
- src: url('css/fonts/fontawesome-webfont.eot?v=4.4.0');
- src: url('css/fonts/fontawesome-webfont.eot?#iefix&v=4.4.0') format('embedded-opentype'),
- url('css/fonts/fontawesome-webfont.woff2?v=4.4.0') format('woff2'),
- url('css/fonts/fontawesome-webfont.woff?v=4.4.0') format('woff'),
- url('css/fonts/fontawesome-webfont.ttf?v=4.4.0') format('truetype'),
- url('css/fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular') format('svg');
- font-weight: normal;
- font-style: normal;
- }
- .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;
- }
弄完之后找个图标来试试，比如 <i class="fa fa-handshake-o"></i> 这个握手图标，可以显示为： 这样的图标在老版本字体图标库中是不能显示的。
本文禁止全文转载。任何形式转载请联系作者（时光在路上 ｗｗｗ．ｔｉｍｅｚｌｓ．ｃｏｍ） Copyright © 2023. All Rights Reserved
需要升级字体图标库的朋友可以参照本文照猫画虎折腾一番。
