CSS小技巧（一）：iconfont的使用

在我们使用CSS对页面进行编辑布局时，经常会用到一些小图标或者logo。
常见的比如我们在制作个人主页时，使用超链接图标来跳转到你的微博或其他页面等。这时候就会有一个很困扰的问题：去哪里“找”这些图标呢？

不外乎两种：
自己通过专业的软件来切图或绘制，需要有一定的了解；
其次，就是“找现成的”。

但是网上的logo和图片样式各异，像素层次不齐，很难收集到有用的信息。
我们在写CSS时需要用到很多的工具或者工具类网站，今天就为大家介绍一个专门采集各种图标的网站和使用的教程：

http://www.iconfont.cn
阿里巴巴矢量图标库

登录与搜索

首先进入主页，点击右上角的登录，推荐使用GitHub登录。

在搜索框内输入你想要找到的图标，比如："weibo"。

出现了很多关于微博的图标，这里我们点击第三行第一个"weibo"，鼠标挪动选择第一个“添加入库”。
已经被添加入库的图标会以虚线框起来，以鉴别是否重复选取。

我们再搜索几个自己需要的图标并以此添加入库。

点击右上角的购物车小图标，选择添加至项目。创建项目并加入此新项目。

在我的项目页面，选择格式"Symbol"——查看在线链接——暂无代码，点此生成。

将代码引入html页面中，一般放在head标签内即可。

<script src="////at.alicdn.com/t/font_959581_uir2sooudm.js"></script>

这是一种最新的引入方式，也是未来主流的方式。
再加入通用CSS代码，一次即可。

<style type="text/css">
    .icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
</style>

这时候就可以通过添加svg标签放在合适的位置，来代替img标签引用图标了。
还可以通过font-size,color来调整样式。

<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xxx"></use>
</svg>

我们可以点击图标浮动信息底部的“复制代码”来替换"#icon-xxx"。

首页还有管理图标、项目等众多功能，总体来说是一个非常实用的CSS获得矢量图标的工具网站。即美观，又节省时间。



Wrtten by：EdenSheng
Email：[email protected]