css小图标的使用,CSS小技巧（一）：iconfont的使用

在我们使用CSS对页面进行编辑布局时，经常会用到一些小图标或者logo。

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

不外乎两种：

自己通过专业的软件来切图或绘制，需要有一定的了解；

其次，就是“找现成的”。

但是网上的logo和图片样式各异，像素层次不齐，很难收集到有用的信息。

我们在写CSS时需要用到很多的工具或者工具类网站，今天就为大家介绍一个专门采集各种图标的网站和使用的教程：

登录与搜索

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

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

出现了很多关于微博的图标，这里我们点击第三行第一个"weibo"，鼠标挪动选择第一个“添加入库”。

已经被添加入库的图标会以虚线框起来，以鉴别是否重复选取。

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

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

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

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

这是一种最新的引入方式，也是未来主流的方式。

再加入通用CSS代码，一次即可。

.icon {

width: 1em; height: 1em;

vertical-align: -0.15em;

fill: currentColor;

overflow: hidden;

}

这时候就可以通过添加svg标签放在合适的位置，来代替img标签引用图标了。

还可以通过font-size,color来调整样式。

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

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

Wrtten by：EdenSheng

Email：singlesaulwork@gmail.com