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

 时间:2024-10-14 00:33:55

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浏览器如何在收藏夹创建文件夹?
  • 热门搜索
    日剧大全 治疗肩周炎最佳方法 科技画大全 前列腺炎治疗方法 企业邮箱怎么登陆 我的世界药水配方大全 湿疹图片大全 瘦大腿的方法 猪耳朵的做法大全 儿童睡眠不好怎么办