摘要：已经被添加入库的图标会以虚线框起来，以鉴别是否重复选取。点击右上角的购物车小图标，选择添加至项目。创建项目并加入此新项目。将代码引入页面中，一般放在标签内即可。这是一种最新的引入方式，也是未来主流的方式。
在我们使用CSS对页面进行编辑布局时，经常会用到一些小图标或者logo。
常见的比如我们在制作个人主页时，使用超链接图标来跳转到你的微博或其他页面等。这时候就会有一个很困扰的问题：去哪里“找”这些图标呢？
不外乎两种：
自己通过专业的软件来切图或绘制，需要有一定的了解；
其次，就是“找现成的”。
但是网上的logo和图片样式各异，像素层次不齐，很难收集到有用的信息。
我们在写CSS时需要用到很多的工具或者工具类网站，今天就为大家介绍一个专门采集各种图标的网站和使用的教程：
http://www.iconfont.cn
阿里巴巴矢量图标库
首先进入主页，点击右上角的登录，推荐使用GitHub登录。
在搜索框内输入你想要找到的图标，比如："weibo"。
出现了很多关于微博的图标，这里我们点击第三行第一个"weibo"，鼠标挪动选择第一个“添加入库”。
已经被添加入库的图标会以虚线框起来，以鉴别是否重复选取。
我们再搜索几个自己需要的图标并以此添加入库。
点击右上角的购物车小图标，选择添加至项目。创建项目并加入此新项目。
在我的项目页面，选择格式"Symbol"——查看在线链接——暂无代码，点此生成。
将代码引入html页面中，一般放在head标签内即可。
这是一种最新的引入方式，也是未来主流的方式。
再加入通用CSS代码，一次即可。
这时候就可以通过添加svg标签放在合适的位置，来代替img标签引用图标了。
还可以通过font-size,color来调整样式。
我们可以点击图标浮动信息底部的“复制代码”来替换"#icon-xxx"。
首页还有管理图标、项目等众多功能，总体来说是一个非常实用的CSS获得矢量图标的工具网站。即美观，又节省时间。
Wrtten by：EdenSheng
Email：singlesaulwork@gmail.com
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/117037.html
摘要：所以实现小图标时雪碧图跟图标字体会在一个网站共存，自定义图标字体为什么比较耗时，且太复杂图标无法实现请往下看开发流程就了解了。参考资料细谈浅谈图标字体向下兼容优雅降级技术绘制小图标技巧雪碧图图标字体矢量小图标设计本文对应源码源码地址演示地址 showImg(https://segmentfault.com/img/bVRnAC?w=431&h=220); 之前写了一篇关于雪碧图的博文，...
摘要：在所有的网站优化话题中，资源文件的压缩都是占很大比重的。像百度图片中的友情链接所使用的图片就是作为呈现的，并使用进行合并。可以减少请求，还可以配合离线存储做性能优化。创作自已的字体图标很费时间，重构人员后期维护的成本偏高。 前言 第一篇文章，小弟先做一番自我介绍^ω^姓名不说，年龄21岁，湖北武汉一所二本大学2016届本科毕业生，大四前的暑假起对web前端产生兴趣并有半年实习经验。ng...
摘要：在所有的网站优化话题中，资源文件的压缩都是占很大比重的。像百度图片中的友情链接所使用的图片就是作为呈现的，并使用进行合并。可以减少请求，还可以配合离线存储做性能优化。创作自已的字体图标很费时间，重构人员后期维护的成本偏高。 前言 第一篇文章，小弟先做一番自我介绍^ω^姓名不说，年龄21岁，湖北武汉一所二本大学2016届本科毕业生，大四前的暑假起对web前端产生兴趣并有半年实习经验。ng...
摘要：方式和方式是极其相似的，只不过他们一个用的是图标的字体编码，一个用的是图标的引用而已是使用了引用的类名，可在下载的中查看，或者可以在阿里矢量图标库的网站上，进入我的项目查看。 字体图标iconfont阿里官网传送门： http://www.iconfont.cn/打开首页的小图标好漂亮哦1）showImg(https://segmentfault.com/img/bVbghOc?w=1...
阅读 746·2021-09-22 16:01
阅读 2041·2021-08-20 09:37
阅读 1677·2019-08-30 15:54
阅读 1671·2019-08-30 15:44
阅读 737·2019-08-28 18:23
阅读 2981·2019-08-26 12:17
阅读 990·2019-08-26 11:56
阅读 1525·2019-08-23 16:20
