icomoon字体图标的使用

最新推荐文章于 2024-04-09 14:09:46 发布

耍酷的李世达

最新推荐文章于 2024-04-09 14:09:46 发布

阅读量307

点赞数 1

分类专栏：笔记文章标签： css

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/qq_44864697/article/details/108425274

版权

笔记专栏收录该内容

18 篇文章 0 订阅

订阅专栏

详细步骤

1.字体图标的下载

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

这里我用icomoon来举例：

在这里插入图片描述

进入后
在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

选择完后，点击生成字体

在这里插入图片描述

然后下载

在这里插入图片描述

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

2.字体图标导入

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

在这里插入图片描述

在这里插入图片描述

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

在这里插入图片描述

在这里插入图片描述

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

在这里插入图片描述

3.使用字体图标

在下载文件中找到demo打开

在这里插入图片描述

在这里插入图片描述

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

在这里插入图片描述

成功

在这里插入图片描述

4.字体图标的追加

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

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

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

在这里插入图片描述

耍酷的李世达

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
icomoon字体图标的使用

详细步骤1.字体图标的下载icomoon字库 http http://icomoon.io 国外服务器慢阿里iconfont字库 http://www.iconfont.cn/ 国内服务器快这里我用icomoon来举例：进入后如果还没找到心仪的，滑到最下面，点击从库里添加系列对于选择的图标可以修改自己想要的样式最后退出编辑，继续选择图标选择完后，点击生成字体然后下载下载完毕之后,注意原先的文件不要删,后面会用。2.字体图标导入解压后把下载包里面的f
复制链接

扫一扫

专栏目录

评论 1

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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