icomoon图标字体的下载与使用

使用图标字体的原因

1、轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，不需要下载一个个图像。这样可以减少HTTP的请求数量，而且和HTML5的离线存储配合，可以对性能做出优化。

2、灵活性：不调字体可以像页面中的文字一样，通过font-size属性来对其进行大小的设置，而且还可以添加各种文字效果，如color、hover、filter、text-shadow、transform等效果。灵活的简直不像话！

3、兼容性：图标字体支持现代浏览器，甚至是低版本的IE浏览器，所以可以放心的使用它。

4、相比于位图放大图片会出现失真、缩小又会浪费掉像素点，图标字体不会出现这种情况。

下载icomoon图标字符

链接: https://icomoon.io/#home.
进入icomoon官网首页，点击下面图片中红框的位置

然后选择自己想要的图标（通过点击对于图标进行选择），如果想要全选就按照图中箭头指向的方式进行全选或取消选择。

如果当前图标集不能满足需求，可以滑动滚动条至底部，点击从库添加图标，如下图所示。

选择需要的图标集点击add进行添加。

选择完成需要的图标以后就点击最下方的产生字型图标，对选中图标进行生成。

点击生成后，就可以看到生成的对于图标集，然后在点击下载就会下载一个icomoon的压缩包。

解压后，将文件夹中的fonts文件夹复制粘贴到当前项目的文件夹中，如果呀查看对于的图标可打开demo.html文件找到需要的图标字体。

icomoon的使用

在demo.html文件中找到需要的图标，复制图标对应的小方框，将其放在需要显示的标签内。这里虽然复制的每一个小方框看起来都是一样的，但在使用上都是不一样的，所以要去复制相应的小方框。

使用代码如下，这里是将其放在span标签内。

<span class="prep" ></span>
<span class="next" ></span>

然后找到icomoon文件夹中的style.css文件，打开复制下图中的css代码到当前文件的style中。

/* 字体声明 */
@font-face {
	 font-family: 'icomoon';
	 src:  url('fonts/icomoon.eot?26jsqa');
	 src:  url('fonts/icomoon.eot?26jsqa#iefix') format('embedded-opentype'),
	 url('fonts/icomoon.ttf?26jsqa') format('truetype'),
	 url('fonts/icomoon.woff?26jsqa') format('woff'),
	 url('fonts/icomoon.svg?26jsqa#icomoon') format('svg');
	 font-weight: normal;
	 font-style: normal;
	 font-display: block;
}

接着再设置对应标签的font-family: ‘icomoon’; 具体代码如下：

.prep,.next{
		font-family: 'icomoon';
		font-size: 30px;
		corlor: #0f893d;
		cursor: pointer;
		padding-right: 10px;
}

如上代码，对于字体图标我们还可以设置字体的大小，颜色，关于对字体的设置都可以使用在字体图标上。

最后的使用的结果如下图：