前端处理小图标的技巧分享-css教程-PHP中文网

在前端日常开发中，小图标是必不可少的，我们该如何高效的处理小图标是每位前端人要考虑的，下面这篇文章通过图文实操给大家详细介绍了关于前端处理小图标的那些解决方案，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。

前言

在开始本文之前，我们先做一个选择题：前端开发使用构建工具的目的是什么？

A、因为现在流行node.js，都在使用构建工具

B、让前端开发变得高大上，和后端一样编译才能运行

C、让自动化工具替代重复的手工操作，比如合并代码，刷新浏览器预览效果等。

选择A、B请直接关闭此文，选择C请继续阅读。

其实使用工具的目的就一个： 自动化一些重复操作，提升工作效率。ok，明确了这一点之后再来探究有哪些方式，可以把一堆小图标合并成一个图片文件并生成相应的样式。

按照生成文件和使用方式来看，可以大致分成3类处理方式：

png sprite

合成雪碧图是历史最悠久最成熟的解决方案，把不同的png小图标拼接成一张png图片。

手动操作

有的公司甚至让UI设计师来合并小图标（UI设计师成了自动化工具，囧~），这样做减少前端工作量的同时也带来一些问题。

沟通问题。如果只想简单地修改某个图标颜色，大小，都要与设计师沟通，一来一回增加时间成本。
样式问题。设计师提供的小图标不能直接用，要配合特定的样式（偏移值，大小）才行。
命名问题。即使有犀利的设计师提供了css文件，样式类的命名也难以符合前端开发规范和需求（真有这样的设计师欢迎私信推荐给我(●^◡^●)）

所以这种处理方式不推荐也不在我们的讨论范围之列。

自动化工具

当我们拥有了自动化工具的时候，部分问题就可以对整个流程进行优化了。

根据psd切出小图标（前端必备，自己动手，丰衣足食），并把小图标放入源文件夹。
构建工具自动生成图片和css文件，并根据小图标名生成对应的样式名。
代码中引入样式和图片。

配置文件

以 npm 的 gulp.spritesmith 模块为例实现整个流程。

这是 gulpfile.js 中配置的任务：

var gulp = require(&#39;gulp&#39;);
var $ = require(&#39;gulp-load-plugins&#39;)();

gulp.task(&#39;png&#39;, function () {
  gulp.src(&#39;./src/*.png&#39;)
    .pipe($.spritesmith({
      imgName: &#39;icon.png&#39;,  //参数，生成图片文件名
      cssName: &#39;icon.css&#39;,  //参数，生成的样式文件名
      cssTemplate: &#39;./src/png_template.hbs&#39;  //参数，样式文件模板的路径，默认使用的是handlerbars模板
    }))
    .pipe(gulp.dest(&#39;dist/png&#39;));
});

登录后复制

功能比较强大，除了css文件外还可以生成scss和less文件，同时也可以用模板文件对其进行格式化。这里我自定义了一个 png_template.hbs 文件，内容如下：

// 主要增加了一个通用样式，给图标赋予内联块级样式
.icon {
  display: inline-block;
}
{{#sprites}}
.icon-{{name}} {
  background-image: url({{{escaped_image}}});
  background-position: {{px.offset_x}} {{px.offset_y}};
  width: {{px.width}};
  height: {{px.height}};
}
{{/sprites}}

登录后复制

开发流程

配置完成之后，在源文件夹中放入两个 question.png、hook.png 两个小图标进行调试。

gulp 处理后生成了两个文件：icon.css、icon.png。打开 icon.css，可以看到根据图标名生成了两个样式类：

.icon {
  display: inline-block;
}
.icon-hook {
  background-image: url(icon.png);
  background-position: -40px 0px;
  width: 16px;
  height: 16px;
}
.icon-question {
  background-image: url(icon.png);
  background-position: 0px 0px;
  width: 40px;
  height: 40px;
}

登录后复制

在代码中使用起来很简单

// 引用生成的css文件
<link rel="stylesheet" href="./png/icon.css" charset="utf-8">
...
//直接给标签添加样式类
<i class="icon icon-hook"></i>
<i class="icon icon-question"></i>

登录后复制

预览效果见文末截图

问题

感谢技术的进步和人民生活水平的提高，这种高效的方式马上碰到一个“天敌”：高dpr的视网膜屏幕。

用响应式判断dpr的话，前面所有的工作量都要倍增，同时还要加载多余的样式。而且随着屏幕更新换代，dpr增多就要多做一张图片和样式，想想都太磨人 -_-||

那么是否有图片可以自适应不同dpr的屏幕？css3的曙光给我们指引了新的方向。

font-face

也称作字体图标，这种技术简单来说就是把矢量图合并生成字体文件，然后在css中引用对应的字体编码即可渲染成图片。因为字体是适应各种屏幕的，所以字体图标也继承了这个优点。

手动操作

目前有不少制作字体图标的网站，比较火的有icomoon、阿里巴巴图标库等。

基本操作都是在线上编辑图标，然后下载一个压缩包，包含字体文件和样式。首先的问题是不同图标大小需要手动调整 font-size 属性；其次就是手工操作太频繁：上传 - 编辑 - 下载；最后就是依赖网络环境，没网络就没法编辑图标。既然如此，我们尝试使用自动化工具离线生成文件。

自动化工具

依然使用的是github上star数比较多的模块 gulp-iconfont ，但是要同时生成css还需另一个模块 gulp-iconfont-css。

配置文件

配置 gulpfile.js

var gulp = require(&#39;gulp&#39;);
var $ = require(&#39;gulp-load-plugins&#39;)();

gulp.task(&#39;iconfont&#39;, function () {
  // 先配置样式，再配置字体文件
  return gulp.src([&#39;src/*.svg&#39;])
    .pipe($.iconfontCss({
      fontName: &#39;iconfont&#39;, //字体名
      path: &#39;./src/font_template.css&#39;,  //模板文件路径
      cssClass: &#39;iconfont&#39;  //样式类名
    }))
    .pipe($.iconfont({
      fontName: &#39;iconfont&#39;, //字体名
      formats: [&#39;ttf&#39;, &#39;eot&#39;, &#39;woff&#39;, &#39;woff2&#39;, &#39;svg&#39;] //输出的字体文件格式
    }))
    .pipe(gulp.dest(&#39;dist/font&#39;));
});

登录后复制

此处省略模板文件~

开发流程

配置完成之后，在源文件夹中放入两个 question.svg、hook.svg 两个小图标进行调试。

gulp 处理后生成了6个文件： _icon.css、iconfont.eot、iconfont.svg、iconfont.ttf、iconfont.woff、iconfont.woff2。打开 _icon.css，可以看到根据图标名生成了两个样式类：

@font-face {
 font-family: "iconfont";
 src: url(&#39;./iconfont.eot&#39;);
 src: url(&#39;./iconfont.eot?#iefix&#39;) format(&#39;eot&#39;),
  url(&#39;./iconfont.woff2&#39;) format(&#39;woff2&#39;),
  url(&#39;./iconfont.woff&#39;) format(&#39;woff&#39;),
  url(&#39;./iconfont.ttf&#39;) format(&#39;truetype&#39;),
  url(&#39;./iconfont.svg#iconfont&#39;) format(&#39;svg&#39;);
}

.iconfont:before {
 font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 font-style: normal;
 font-variant: normal;
 font-weight: normal;
 /* speak: none; only necessary if not using the private unicode range (firstGlyph option) */
 text-decoration: none;
 text-transform: none;
}


.iconfont-hook:before {
 content: "\E001";
}

.iconfont-question:before {
 content: "\E002";
}

登录后复制

在代码中使用起来也很简单

// 引用生成的css文件
<link rel="stylesheet" href="./font/_icons.css" charset="utf-8">

...

//直接给标签添加样式类
<i class="iconfont iconfont-hook"></i>
<i class="iconfont iconfont-question"></i>

登录后复制

预览效果见文末截图

使用问题

和之前的介绍的工具一样，可以使用模板，也可以生成scss、less、css多种格式文件。蛋疼的问题是：生成的所有的字体图标都会取最高的那个图标的高度。也就是说一些图标需要重新设置高度！自动化操作瞬间降级为半自动化~而且生成的图片还带锯齿（不知道是不是配置问题），所以只能算是失败的方案。

svg sprite

正当愁眉不展之时，看到张鑫旭一篇文章《未来必热：SVG Sprite技术介绍》

（末尾的结束语将字体图标和svg sprite做了对比，有兴趣的朋友可以看一下）才让我感觉柳暗花明：原来还有更强大的svg sprite。将svg矢量图标整合成一个svg文件，使用的时候以 symbol 或 use 等标签的形式展现。

手动操作

考虑这个方案之时就没打算用手动化，因为如果需要手动操作还不如使用字体图标，所以直接考虑自动化工具。

自动化工具

使用的是github上star数仅次于gulp-svgstrore的模块 gulp-svg-sprite 。支持scss、less、css文件格式输出。

配置文件

var gulp = require(&#39;gulp&#39;);
var $ = require(&#39;gulp-load-plugins&#39;)();

gulp.task(&#39;svg&#39;, function () {
  return gulp.src(&#39;./src/*.svg&#39;)
  .pipe($.svgSprite({
    mode: {
      symbol: {
        prefix: `.svg-`,
        dimensions: &#39;%s&#39;,
        sprite: &#39;../icon.svg&#39;,
        symbol: true,
        render: {
          css: {
            dest: &#39;../icon.css&#39;
          }
        }
      }
    }
  }))
  .pipe(gulp.dest(&#39;dist/svg&#39;));
});

登录后复制

开发流程

整个流程同上，配置完成之后，在源文件夹中放入两个 question.svg、hook.svg 两个小图标进行调试。

gulp 处理后生成了2个文件： icon.svg、icon.css。打开 icon.css，可以看到根据图标名生成了两个样式类：

.svg-hook {
 width: 16px;
 height: 16px;
}

.svg-question {
 width: 40px;
 height: 40px;
}

登录后复制

非常简洁有么有！！！

使用起来稍稍复杂一点：

//引用样式文件
<link rel="stylesheet" href="./svg/icon.css" charset="utf-8">

...

<svg class="svg-hook">
  <use xlink:href="./svg/icon.svg#hook"></use>
</svg>
<svg class="svg-question">
  <use xlink:href="./svg/icon.svg#question"></use>
</svg>

登录后复制

预览效果见文末截图

相比字体图标：