字体图标iconfont的学习与使用

字体图标

展示的是图标,本质是属于字体

字体图标的优点

轻量级:一个图标字体要比一系列的图像要小。一旦字体加载了,图标就会马上渲染出来,减少服务器的请求
灵活性:本质其实是文字,可以很随意的改变颜色,产生阴影,透明效果,旋转等
兼容性:几乎支持所有的浏览器
注:字体图标不能替代精灵技术,只是对工作中的图标部分技术的提升和优化
结构复杂的还是需要使用精灵技术

icomoon字体图标的使用方法

1.字体图标的下载

推荐下载:
icomoon字库 http://icomoon.io
阿里iconfont字库 http://www.iconfont.cn/

打开网址http://icomoon.io
在这里插入图片描述
可以选择需要的图标,如果没有可以点击左下的Add icons From Library… 添加更多,点击add添加
在这里插入图片描述
如果想要调整图标大小,方向,点击Edit

在这里插入图片描述
如果想要将图标下载下来,选好后点击
在这里插入图片描述
再点击Download
在这里插入图片描述

2.字体图标的追加

如果想要添加新的图标,把下载的压缩包里面的selection.json从新上传,然后选中自己想要新的图标,从新下载压缩包,并替换原来的文件即可

3.字体图标的引入

1.把下载包里面的fonts文件夹放入页面根目录下

在这里插入图片描述
2.把字体文件通过css引入到我们的页面中
在这里插入图片描述
在这里插入图片描述
引入后找到之前的文件夹,点开demo.html
在这里插入图片描述
复制粘贴到到标签中
在这里插入图片描述


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