如何引用iconfont图标 - 随意之光的港湾

本文发布于 251 天前，其中的信息可能已经有所发展或是发生改变。

最近有人来问本站图标中一些图标是如何引用的，这里我将简单讲解。

本站使用的是iconfont图标库（https://www.iconfont.cn/）

1、注册登录

2、在首页进行搜索

3、选择自己喜欢的图标，悬浮在图标上选择添加入库

4、直接下载代码/添加到项目

可在购物车直接下载代码使用，下载代码后见本地引用。

但我建议添加进项目，优点在于在线引用及日后维护。

点击添加至项目，新建项目。

5、资源处理

（1）在线链接

在添加进项目后进入资源管理-我的项目-Font class-创建代码

在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。

（2）本地链接

可在购物车或项目页面获取下载后上传到你的网站任意位置解压

6、css引用

使用css链接引用

使用WordPress国内主题可以寻找主题设置中脚本等设置项填写，或将其填写至主题中head.php文件

在线链接

<link rel="stylesheet" href="获取的链接">

本地链接

<link rel="stylesheet" href="/上传目录/iconfont.css">

7、在想要使用的地方使用以下代码

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

xxx为图标对应代码，可在项目对应页面或demo_index.html获取

以上便是本次文章全部内容，有什么疑问欢迎在评论区提出

评论