如何搞定网页中那些烦人的图标_html/css_WEB-ITnose

浏览过网页的人都知道，网页中出了包含文字，图片等，通常情况下还包含一些小的图标，这些小图标对于切图人员来说可是一个*烦，不但切图工序麻烦，还会让网页中增加许多图片请求，即使是将图片都合成到一张图上，增加了图片合成的工序不说，还得挨个去量每个图标的position，如果一个网页中有许多小图标，我想切图人员必然会抓狂。今天我就来给大家分享一下如何搞定网页中那些烦人的图标。

我们先来看看我到底说的是那些图标吧。

看到了吧，就这些小图标。在一个网页中如果有十几二十个这样的小图标，我觉得切图人员的内心必然是崩溃的，边切图心里肯定边骂设计师是傻逼呢。那我们到底如何轻松的解决这件事呢？

1、登陆www.iconfont.cn

2、点击登录，用新浪微博账号登陆

3、在首页搜索框中搜索我们需要的图标

4、回车，会进入到搜索结果页面，如下：

5、找到我们需要的图标，点击会被添加到暂存架

6、点击暂存架

7、添加到历史项目或者新项目

8、如果是加入历史项目，则点击“存储为历史项目”，创建新项目则点击“存储为新项目”，输入名字之后点击存储。

9、存储之后，跳转到项目页面

10、鼠标放到“获取在线链接”上，会显示“生成在线链接”。

11、复制生成的链接，放到css文件里

12、点击“前端应用帮助”，会有详细的使用文档，这里我就不详细介绍了。

注意事项：

每次添加新的图标之后，一定要重新生成在线链接，并将新的在线链接复制替换之前css文件的代码。

有了它，一定会让你眼前一亮，省掉了很多切图的麻烦，心里有没有爽一点？如果有，别太抠了，打赏吧，一块也是爱啊。

我是年轻大叔

罗辑思维前端开发工程师，个人微信公众号：xuebing_wxb