摘要：我之前因为项目用比较多所以使用字体图标比较多后来接触到了发现想要的什么图标都有还可以自定义图标非常强大之前看了一波教程觉得繁琐自己弄明白后感觉如此简单做了这么个简单教程直接上图简单粗暴避免新手走弯路这里讲解的默认是元素使用类名百度找到阿里巴
我之前因为项目用bootstrap比较多,所以使用font awesome字体图标比较多,后来接触到了iconfont,发现想要的什么图标都有,还可以自定义图标,非常强大!之前看了一波教程,觉得繁琐,自己弄明白后感觉如此简单,做了这么个简单教程,直接上图,简单粗暴,避免新手走弯路,这里讲解的默认是元素使用类名;
step 1:百度iconfont,找到阿里巴巴矢量图标库官网,然后注册登录,或者用github登录也行,此步骤跳过;
step 2:找到图标管理->我的项目->然后新建项目:
右边点击新建项目,用于保存自己常用的图标;
step 3:项目新建完成后,往项目里添加我们要想使用的图标,找到图标库,搜索一个想要的图标,然后添加到购物车;
我现在将第一个安卓图标加入我的项目,点击加入购物车
step 4:添加到购物车完成后,购物车徽章数字应该显示1了,点击右上角的购物车图标,选择添加至项目,选择我们刚刚创建的项目,确定;
自动跳转到对应的项目里了,如图:
step 5:接下来一部比较关键,将打包好的字体文件下载到本地添加到你的项目中,在项目中引用文件中的iconfont.css文件;
下载下来解压后的文件如下:
强调一次,把上面这些文件都放在一个文件夹内，然后放在你的项目目录中,再在你的项目中引入iconfont.css文件
step 6:到了最后一步了,如何在项目中使用字体图标呢,其实很简单,创建一个i标签或者span标签,添加两个类名,一个固定的是iconfont,另一个是你想要的那个图标对应的类名:
具体代码如下:
好了,刷新页面,图标是不是出来了呢?
Ok,到这一步,恭喜你成功了,是不是很简单,不简单?那就从头再看一遍;
调节字体图标的大小是通过元素的font-size属性来控制的;
转自：https://www.cnblogs.com/hjvsdr/p/6639649.html
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/1880.html
摘要：所以实现小图标时雪碧图跟图标字体会在一个网站共存，自定义图标字体为什么比较耗时，且太复杂图标无法实现请往下看开发流程就了解了。参考资料细谈浅谈图标字体向下兼容优雅降级技术绘制小图标技巧雪碧图图标字体矢量小图标设计本文对应源码源码地址演示地址 showImg(https://segmentfault.com/img/bVRnAC?w=431&h=220); 之前写了一篇关于雪碧图的博文，...
摘要：欢迎大家收看聊一聊系列，这一套系列文章，可以帮助前端工程师们了解前端的方方面面不仅仅是代码从说起要想了解，得从一个新的规则说起。因为用户没有安装的话，我们强制要求显示也没有办法。国内有阿里巴巴的平台，可以选自己喜欢的图标导出。 欢迎大家收看聊一聊系列，这一套系列文章，可以帮助前端工程师们了解前端的方方面面（不仅仅是代码）：https://segmentfault.com/blog/fr...
摘要：欢迎大家收看聊一聊系列，这一套系列文章，可以帮助前端工程师们了解前端的方方面面不仅仅是代码从说起要想了解，得从一个新的规则说起。因为用户没有安装的话，我们强制要求显示也没有办法。国内有阿里巴巴的平台，可以选自己喜欢的图标导出。 欢迎大家收看聊一聊系列，这一套系列文章，可以帮助前端工程师们了解前端的方方面面（不仅仅是代码）：https://segmentfault.com/blog/fr...
阅读 1421·2023-04-25 16:31
阅读 2013·2021-11-24 10:33
阅读 2723·2021-09-23 11:33
阅读 2514·2021-09-23 11:31
阅读 2879·2021-09-08 09:45
阅读 2307·2021-09-06 15:02
阅读 2627·2019-08-30 14:21
阅读 2299·2019-08-30 12:56
