.icon{宽度：1em;高度：1em；垂直对齐：-0.15em；填充：当前颜色；溢出：隐藏；}我们在使用CSS编辑页面布局的时候，经常会用到一些小图标或者logo。比如我们在做个人主页的时候，用超链接图标跳转到你的微博或者其他页面。这时候就会出现一个很麻烦的问题：去哪里“找”这些图标呢？无外乎两种：通过专业软件自己剪图或画图，需要有一定的了解；其次，要“找现成的”。但是网上的logo和图片风格各异，像素层次参差不齐，很难收集到有用的信息。我们在写CSS的时候，需要用到很多工具或者工具网站。今天给大家介绍一个收集各种图标的网站和教程：http://www.iconfont.cn阿里巴巴矢量图标库登录搜索首先进入首页，点击右上角的登录，推荐使用GitHub登录。在搜索框中输入您要查找的图标，例如：“weibo”。关于微博的图标有很多，这里我们点击第三行第一个“微博”，移动鼠标选择第一个“加入微博”。已添加到库中的图标将用虚线框起来，以标识它们是否被重复选择。让我们搜索一些我们需要的图标并将它们添加到库中。单击右上角的小购物车图标，然后选择添加到项目。创建一个项目并加入这个新项目。在我的项目页面，选择格式“Symbol”——查看在线链接——目前还没有代码，点这里生成。将代码引入html页面，一般在head标签内。这是最新的引入方式，也是未来的主流方式。然后添加常用的CSS代码，一次。.icon{宽度：1em;高度：1em；垂直对齐：-0.15em；填充：当前颜色；溢出：隐藏；}这时候可以把svg标签放在合适的位置来代替img标签引用图标。您还可以通过字体大小、颜色来调整样式。我们可以点击图标浮动底部的“复制代码”替换“#icon-xxx”的信息。主页还有很多功能，比如管理图标和项目。总体来说是一个非常实用的CSS获取矢量图标的工具网站。它既美观又节省时间。作者：EdenSheng邮箱：singlesaulwork@gmail.com
