如何引用iconfont图标
本文发布于 421 天前,其中的信息可能已经有所发展或是发生改变。

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

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

1、注册登录

2、在首页进行搜索

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

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

如何引用iconfont图标1-随意之光的港湾 · 博客

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

如何引用iconfont图标2-随意之光的港湾 · 博客

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

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

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

5、资源处理

(1)在线链接

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

在线链接服务仅供平台体验和调试使用,平台不承诺服务的稳定性,企业客户需下载字体包自行发布使用并做好备份。
如何引用iconfont图标3-随意之光的港湾 · 博客

(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获取

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

如何引用iconfont图标(https://blog.suiyil.cn/3818.html)随意之光发布于随意之光博客,其中原创内容均以知识共享署名-非商业性使用-以相同方式共享 4.0 国际许可协议(CC BY-NC-SA 4.0)进行许可,转载与引用请注明出处,详见版权协议与免责声明

评论

  1. yeren
    Windows
     江苏省
    1 年前
    2023-8-17 20:55:57

    感谢大佬!成功更换图标!!!ヾ(≧∇≦*)ゝ

本文评论已关闭
上一篇
下一篇