WordPress主题使用Iconfont字体图标的两种方法教程

2020-03-20 · Ryan · 发表评论

Iconfont 字体图标在设计中被广泛应用，在网站中也是必不可少的。它能应用于网站的各处，例如菜单导航、标题等，不论是对设计人员还是对站长来说，实用性都非常大。

Iconfont 是阿里妈妈 MUX 倾力打造的矢量图标管理、交流平台，上面有非常丰富的图标资源。本教程将分享两种在 WordPress 主题上使用 Iconfont 字体图标的方法。

方法一：通过 CSS @font-face 引入

此方法通过将 Iconfont 的字体文件引入到主题样式表中，然后通过 CSS 类来使用图标。

步骤 1：注册账号并搜索图标

访问 Iconfont 官网，注册并登录账号。在搜索框中查找你需要的图标，点击图标上的“购物车”按钮将其添加到你的项目中。

步骤 2：创建项目并添加图标

可以批量添加图标。添加完成后，点击页面右侧悬浮的“购物车”图标，选择“添加至项目”。如果你是首次使用，系统会提示你创建一个新项目，只需填写项目名称即可。

步骤 3：获取代码并引入到主题

图标添加至项目后，页面会跳转到“我的项目”。在这里，你可以找到“查看在线链接”或“Font class”选项。点击后，你将获得类似下图的 CSS 代码。

将生成的 CSS 代码全部复制，并粘贴到你 WordPress 主题的样式表文件中（通常是 style.css）。

/* 请替换为你自己项目生成的代码 */
@font-face {
  font-family: 'iconfont';  /* 项目字体名 */
  src: url('//at.alicdn.com/t/font_xxxxxx.eot');
  src: url('//at.alicdn.com/t/font_xxxxxx.eot?#iefix') format('embedded-opentype'),
       url('//at.alicdn.com/t/font_xxxxxx.woff') format('woff'),
       url('//at.alicdn.com/t/font_xxxxxx.ttf') format('truetype'),
       url('//at.alicdn.com/t/font_xxxxxx.svg#iconfont') format('svg');
}

/* 定义使用该字体的类 */
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

步骤 4：在主题中使用图标

在 Iconfont 项目页面，找到你需要的图标，复制其对应的字符代码（例如： 或 e871）。

在 WordPress 主题的 HTML 模板文件中，通过以下方式使用：

<i class="iconfont">&#xe871;</i>
<!-- 或使用 CSS 伪元素 -->
<span class="iconfont"></span>

对于第二种方式，你需要在 CSS 中为对应的类添加 content 属性：

.your-icon-class::before {
  content: "e871"; /* 注意这里是反斜杠 */
  font-family: "iconfont";
}

方法二：通过 CDN 链接引入（推荐）

此方法更为简单和高效，通过直接引入 Iconfont 生成的 CDN 链接来使用图标，便于管理和更新。

操作步骤

在 Iconfont “我的项目”页面，选择“Font class”方式。
点击“生成代码”，你会得到一个以 //at.alicdn.com 开头的 CSS 链接。
将这段链接代码复制，并添加到 WordPress 主题的 <head> 部分，或者通过 WordPress 的 wp_enqueue_style() 函数引入。

示例：通过函数引入（在主题的 functions.php 文件中添加）：

function mytheme_enqueue_iconfont() {
    wp_enqueue_style( 'mytheme-iconfont', '//at.alicdn.com/t/font_xxxxxx.css', array(), null );
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_iconfont' );

引入后，在主题中直接使用 Iconfont 提供的 CSS 类名即可：

<i class="iconfont icon-home"></i>

方法二的优势：

维护方便： 在 Iconfont 项目更新图标后，只需重新发布项目，CDN 链接会自动更新，无需修改主题代码。
性能更佳： 字体文件由阿里云 CDN 托管，加载速度快。
使用简单： 直接使用类名（如 icon-home），无需记忆字符代码。

对于大多数 WordPress 主题开发场景，推荐使用方法二（CDN 引入），它能显著提升开发效率和后期维护的便利性。