如何将Iconfont的图标以Font class方式引入web

 时间:2026-02-15 16:37:13

1、首先在iconfont图标库中找到需要的图标,点击购物车图标“添加入库”。

如何将Iconfont的图标以Font class方式引入web

2、打开购物车,点击下方“添加至项目”按钮,如果没有项目,就新建一个。

如何将Iconfont的图标以Font class方式引入web

3、在我的项目页,可以看到3种引入方式,以及图标的名称。

如何将Iconfont的图标以Font class方式引入web

4、切换到Font class方式,点击“查看在线链接”,生成以下代码并复制:

如何将Iconfont的图标以Font class方式引入web

5、打开你的网页代码,添加link标签,将上面的代码粘贴到href属性下。注意需为路径添加“http:”字样。

如何将Iconfont的图标以Font class方式引入web

6、然后使用i标签引用图标。图标名称可以在iconfont“我的项目”中点击“复制代码”获取。

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

如何将Iconfont的图标以Font class方式引入web

如何将Iconfont的图标以Font class方式引入web

7、想要修改图标样式,可以通过font-size,color来调整:

如何将Iconfont的图标以Font class方式引入web

8、想要增加或更换新的图标,只需重复1、2、3步骤,并在第4、5步更新一下代码,最后在第6步增加新图标的i标签即可。

如何将Iconfont的图标以Font class方式引入web

  • Windows11如何设置主题背景
  • Win11如何设置任务栏的显示位置
  • Windows11如何恢复Windows10的桌面图标?
  • windows10任务栏怎么变成透明的
  • Win版Edge浏览器如何在收藏夹创建文件夹?
  • 热门搜索
    电容笔是干什么用的 gp是什么意思 猪脚炖什么好吃 慢慢地什么 有理数是什么 十年婚姻是什么婚 高考成绩什么时候出来 pi是什么 menu是什么意思 administrator是什么意思