css中的图标字体的实现方案及原理和工具使用

方案一：利用background-position，专用名词 CSS Sprite（没啥意思就是记不住这个名字）懂原理就好。

要是面试的问我这个我肯定忘了这个单词了。。

这个也是解决前端资源优化的一种方案，原理很简单：就是全局就引一张图片，然后在背景图片靠着background-position显示出来

展现一下老版本的bootsrap的方案

图片是这样的：

[class^="icon-"],[class*=" icon-"] {
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-top: 1px;
	*margin-right: .3em;
	line-height: 14px;
	vertical-align: text-top;
    /*下边这是关键代码。首先定制一个容器和图标的宽高一致、

        然后按顺序排列，取的时候按规律取即可*/
	background-image: url(bootstrap/img/glyphicons-halflings-white.png);
	background-position: 14px 14px;
	background-repeat: no-repeat;
}
.icon-glass {
  background-position: 0      0;
}
.icon-music {
  background-position: -72px -48px;
}

平时开发也可以这么做，节省了资源，图标字体拿来就用

<span class="icon-music"></span>

缺点：图标有啥颜色你就得用啥颜色，所以你要是有多种颜色还不好办。

方案2：引入字体文件

看一下新版bootstrap做法

@font-face {
  font-family: 'Glyphicons Halflings';

  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: normal;
  line-height: 1;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.glyphicon-asterisk:before {
  content: "\002a";
}
.glyphicon-plus:before {
  content: "\002b";
}

很简答，先引入字体文件，然后根据他的unicode直接就可以显示，这样出来的是真的字，可以根据你更改的文字颜色而变化；

如果有图表不在某些框架的库里，都是我们公司自己做的咋办呢，最差的办法就是直接引入png了，但是肯定有好方法了

推荐一个网站Iconfont-阿里巴巴矢量图标库官网，提供了转换你的svg为字体的方案，并顺手帮你生成了css文件

生成的文件目录是这样的

打开iconfont.css

发现这个代码很眼熟了吧，然后引入你的项目吧，在这个网站上有如何转换.AI转换SVG的方法。

方案3 直接引入SVG做图标，然后再来个SVG-Sprite，未来的趋势

先看原理：

代码太长，直接上图

首先定义这些图标放在页面上，放在那里都行，反正也不占地方，也看不见，安全起见放前边吧。

官方symbol解释：

symbol元素用来定义一个图形模板对象，它可以用一个<use>元素实例化。symbol元素对图形的作用是在同一文档中多次使用，添加结构和语义。结构丰富的文档可以更生动地呈现出来，类似讲演稿或盲文，从而提升了可访问性。注意，一个symbol元素本身是不呈现的。只有symbol元素的实例（亦即，一个引用了symbol的 <use>元素）才能呈现。

定义以后引用

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

就这样了

显示出来了，再看看DOM结构是什么，原来如此，相当于把我们定义的，复制过来某个部分让他显示了。

大功告成。

实际使用中还是要借助工具Iconfont-阿里巴巴矢量图标库官网

刚才咱们下载过这个了图标了，都在里边了，找到

引入之后再添加点css 代码

.icon {
	width: 1em;
	height: 1em;
	vertical-align: -0.15em;
	fill: currentColor;
	overflow: hidden;
}

这样我们直接使用就好了，使用方法

<!--一个图标-->
<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-ai-weixin"></use>
</svg>
<!--另一个图标-->
<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-bofang"></use>
</svg>

然后你对他想放大就放大，想变色就变色了。。随你心意了。

至于svg-sprite-loader 先放一放。以后研究了再说