前端开发中icon图标使用的那些门道儿
前端开发图标使用
在日常开发，前端coder绕不开一个话题，在页面上添加各种小图标，比如
或者是这样的：
一般来说，总体上有三种方案：
- 位图图标，png图片，经典的使用场景——精灵图；
- 字体图标，比较有名的：Font Awesome、icon-font
- svg图标，配合前端框架使用，SVG Sprite技术了解一下……
位图图标
在IE时代，由于浏览器的兼容性问题，png图片是一个不得不采用的方案，实际中我们经常谈论的精灵图，就是这种图片。
字体图标
字体图标相比位图而言，具有以下优点：
- 图像更加清晰；
- 文件更小，一般来说，字体图标相比图片尺寸更小，节省网络资源；
- 灵活性更好，支持按字体的方式去动态调整图标大小，颜色等等；
- 兼容性更好，支持ie6+；
但是，它也有一些问题：
- 不支持多色图标，
- 在不同的设备上，字体的渲染会有一些差别，这是因为浏览器自身对字体的处理方式的不同造成的，此外，这种问题调整起来较为困难；
关于字体图标的使用，有两个方面需要考虑：
1.如何制作字体图标；
2.如何使用字体图标；
字体图标的制作
关于字体图标的制作，有两个方案：
一是，自己亲自动手制作，借助一些现成的工具，比如：Glyphs、IcoMoon
具体制作方法，可以参考这篇文章：如何把你的图标转换成web字体
二是，使用一些现成的第三方服务，比如前面说到的，Font Awesome、icon-font、IcoMoon；
下面我们具体介绍第二种，使用现成的第三方服务：
首先，从两个网站任选一个，下载选取的字体图标；
我们打开看一下里面的目录结构：
然后，针对上面的情况，我们要将字体文件合并成一个fonts文件夹，icomoon不需要合并，而icofont需要我们调整一下目录。复制style.css文件(iconfont.css)中的css样式，粘贴到实际项目的CSS文件中，我姑且将其重命名为iconfont.css，保持其为一个单独的CSS文件。
最后，将fonts.css引入到html中；
<link rel="stylesheet" href="iconfont.css" />
注意：在使用
iconfont.css文件时，一定要根据实际的项目结构，调整字体的路径，类似这样的：
@font-face {
font-family: 'icomoon';
/* 调整路径 */
src: url('fonts/icomoon.eot?ln7h60');
src: url('fonts/icomoon.eot?ln7h60#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?ln7h60') format('truetype'),
url('fonts/icomoon.woff?ln7h60') format('woff'),
url('fonts/icomoon.svg?ln7h60#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
字体图标的使用
调用图标字体有三种方法：
- 通字符（Unicode）引用
- 字体类名（Font-class）
- Symbol方式
Unicode引用
特点
（1）优点
- 兼容性最好，支持IE6+，及所有现代浏览器；
- 支持按字体的方式动态地调整图标大小，颜色等等；
（2）缺点：
- 显然unicode书写不直观，语意不明确，根据编码无法直接得知图标长啥样子；
- 因为本质上是字体，所以不支持多色，即便使用的是多色也会在项目中自动去色；
新版的iconfont支持多色图标，这些多色图标在unicode模式下不能使用，推荐使用symbol方式尽心引用；
使用步骤
一、编辑iconfont.css文件
主要有两个地方：
- 编辑
@font-face - 定义iconfont的样式
/* 编辑字体文件路径*/
@font-face {
font-family: 'iconfont';
/* 注意路径 */
src: url('iconfont.eot');
src: url('iconfont.eot?#iefix') format('embedded-opentype'),
url('iconfont.woff2') format('woff2'),
url('iconfont.woff') format('woff'),
url('iconfont.ttf') format('truetype'),
url('iconfont.svg#iconfont') format('svg');
}
/* 定义iconfont样式 */
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* 具体的样式是一些伪类 */
.icon-meifa:before {
content: "\e603";
}
.icon-zhijiayou:before {
content: "\e604";
}
.icon-xiangshui:before {
content: "\e605";
}
.icon-yanying:before {
content: "\e606";
}
二、应用于页面
挑选相应图标并获取字体编码：
<link rel="stylesheet" href="./iconfont.css">
<span class="iconfont">span>
unicode编码的查看：iconfont.css文件中伪类元素进行对应即可；
补充：
其实，这编辑iconfont.css文件的时候，有一个地方需要注意一下，就是关于：定义iconfont样式，这部分代码的编写，有两种方式：
第一种：就是前面的方式定义.iconfont类的样式，这种方式有一个问题，就是在页面引入样式的时候，总是需要重复写上类名iconfont，可能略显繁琐，那么如何做呢？
第二种：使用属性选择器进行样式匹配：[class^="icon-"], [class*="icon-"] { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }这样，我们在页面引入时，直接写指定的
icon-xxx就可以了；这个其实看个人喜欢哪种喽！
Font class 字体类名引用
特点
font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。
与 Unicode 使用方式相比，具有如下优点：
- 兼容性良好，支持 IE8+，及所有现代浏览器。
- 相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
- 使用方便，因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
缺点：
- 不过因为本质上还是使用的字体，所以多色图标还是不支持的。
使用步骤
一、编辑iconfonts.css 文件：
这一步于unicode方式一样，主要区别在于页面引入的方式不同；
二、应用于页面
<link rel="stylesheet" href="./iconfont.css">
<i class="iconfont icon-meifa">i>
" iconfont" 是你项目下的 font-family。可以通过编辑项目查看，一般默认是 “iconfont”。
symbol方式
特点
这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章
这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：
优点
- 支持多色图标了，不再受单色限制。
- 通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
- 因为是矢量图，所以缩放不会失真；
- 可以通过css实现动画效果；
- 减少http请求，
因为使用svg-icon后，我再也不用发送woff|eot|ttf| 这些字体库的请求了，所有的svg都可以内联在html内。
缺点：
- 兼容性较差，支持 IE9+，及现代浏览器。
- 浏览器渲染 SVG 的性能一般，还不如 png。
使用步骤
一、编辑iconfont.css文件
这一步与前面的两种方法是一样的，区别还是在于引入方式的不同；
二、页面应用
引入的时候，我们需要做三件事情：
（1）引入项目下面生成的 symbol 代码：
（2）加入通用 CSS 代码（引入一次就行）：
（3）挑选相应图标并获取类名，应用于页面：
<script src="./iconfont.js">script>
<style> .icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } style>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xxx">use>
svg>
这里是一个最终代码的对比图：
我们再来看一下浏览器编译之后的页面：
好了，到此为止，我们已经介绍了前端开发中icon的引入。其实，在当下的开发中，前端三大框架的使用，我们也会通过一些方式进行引入，随后的文章，我将介绍一下如何在vue项目中引入svg图标。
最后
欢迎，交流，一起进步，我是一名前端coder。