CSS之如何从icomoon引入及使用字体图标

本文介绍了如何将下载的字体图标引入HTML文件中,包括将fonts文件夹和style.css内容添加到项目中,以及如何通过修改font-family属性来显示图标。此外,还讲解了如何追加更多图标,通过importicons功能导入selection.json文件,实现字体图标的扩展。
摘要由CSDN通过智能技术生成

如何引入字体图标?

从网上下载字体图标

在这里插入图片描述
点进去之后,在其中选择你想要的图标,如果觉得不够用的话,可以点击左下角选择生成更多的图标

在这里插入图片描述

选择好图标后:

在这里插入图片描述
在这里插入图片描述
下载好之后,需要注意了,注意如何操作来在html文件中引入字体图标:

(假如你想引入图标的html文件叫k)

  1. 把下载包中的fonts文件夹放入k所在的根目录中

  2. 把下载包中的style.css文件中@font-face的内容复制到k的style标签中
    在这里插入图片描述

  3. 在下载包中的demo.html中找到对应图标后面的小方框(如下图),复制到k想要放的标签比如span
    在这里插入图片描述
    在这里插入图片描述

  4. 最后在k的style中为该span标签添加font-family属性,与@font-face中的一样,一般为‘icomoon’,这样你就可以得到想要的字体图标啦
    而且你还可以修改图标的颜色、大小等属性,如图~
    在这里插入图片描述

如何追加字体图标?

在这个页面点击左上角的import icons

在这里插入图片描述
然后选择你之前下载好的压缩包中的selection.json
在这里插入图片描述

之后就可以继续在页面中选择你想要添加的字体图标,选择好之后,还是按照之前的步骤,下载完成就可以了,这样,你就又拥有一个包括之前以及现在追加的所有字体图标库了~

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值