如何引用iconfont图标

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

本站使用的是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
     江苏省
    2月前
    2023-8-17 20:55:57

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

发送评论 编辑评论


|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
2233娘 ©bilibili
mao,来自:https://github.com/XiaoLFeng/Emoji
mao,来自:https://github.com/XiaoLFeng/Emoji
颜文字
Emoji
小恐龙
花!
2233娘
mao
mao2
上一篇