上一篇文章分享了 WordPress 主题使用 Iconfont 字体图标的基础教程。本文介绍一种更简便的方法,即使用由“主题君”整理好的 Iconfont 图标库,只需两步即可在主题中调用。
步骤一:在主题头部添加调用代码
将以下 CSS 链接代码添加到您 WordPress 主题的 <head> 区域。通常,您需要编辑主题的 header.php 文件,在 <head> 标签内添加。
<link rel="stylesheet" href="https://at.alicdn.com/t/font_1557485_whdg2u8j17i.css">
说明: 此链接指向一个预定义的 Iconfont 图标集 CSS 文件,包含了数百个常用图标。
步骤二:在页面中使用图标
添加上述代码后,您就可以在主题的任何位置(如文章、小工具、菜单或模板文件)使用图标。使用方法是为 HTML 元素添加对应的 CSS 类。
<i class="iconfont icon-图标类名"></i>
<!-- 或 -->
<span class="iconfont icon-图标类名"></span>
将代码中的 icon-图标类名 替换为您想使用的具体图标类名。
如何查找图标与类名
您需要访问图标库页面来浏览和查找可用的图标及其对应的类名。
图标库地址:https://youquso.com/icon/
在该页面中,您可以:
- 浏览或搜索所需的图标。
- 点击图标,查看或复制其对应的 CSS 类名(格式通常为
icon-xxx)。 - 将复制的类名填入上述 HTML 代码中使用。
通过以上两个步骤,您就可以轻松地在 WordPress 主题中使用丰富的字体图标了。