icomoon字体图标的使用

时间:2024-03-13 09:56:10

详细步骤

1.字体图标的下载

  • icomoon字库 http://icomoon.io 国外服务器慢
  • 阿里iconfont字库 http://www.iconfont.cn/ 国内服务器快

这里我用icomoon来举例:

icomoon字体图标的使用

进入后
icomoon字体图标的使用

如果还没找到心仪的,滑到最下面,点击从库里添加系列

icomoon字体图标的使用
icomoon字体图标的使用

对于选择的图标可以修改自己想要的样式

icomoon字体图标的使用
icomoon字体图标的使用

最后退出编辑,继续选择图标

icomoon字体图标的使用

选择完后,点击生成字体

icomoon字体图标的使用

然后下载

icomoon字体图标的使用

下载完毕之后,注意原先的文件不要删,后面会用。

2.字体图标导入

解压后把下载包里面的fonts文件夹放入页面根目录下

icomoon字体图标的使用

icomoon字体图标的使用

在CSS样式中全局声明字体:简单理解把这些字体文件通过css引入到我们页面中。

icomoon字体图标的使用

icomoon字体图标的使用

一定注意字体文件路径的问题

icomoon字体图标的使用

3.使用字体图标

在下载文件中找到demo打开

icomoon字体图标的使用

icomoon字体图标的使用

把复制的图标粘贴在需要引入的元素里

icomoon字体图标的使用

成功

icomoon字体图标的使用

4.字体图标的追加

如果工作中,原来的字体图标不够用了,我们需要添加新的字体图标到原来的字体文件中。
把压缩包里面的selectionjson从新上传,然后选中自己想要新的图标,从新下载压缩包,并替换原来的文件即可。

icomoon字体图标的使用

icomoon字体图标的使用

icomoon字体图标的使用

然后就可以继续在原来基础上添加字体图标了

icomoon字体图标的使用