自定义字体图标

一.获取字体图标文件（本案例以icomoon为例）

1）访问：http://f2er.club/

2）选择：框架库

3）选择：icomoon

4）选择图标或者导入自己的图标生成文件：

5）下载生成的文件：

得到：icomoon.zip

解压：

6）将fonts的文件夹复制到自己项目

二.引用字体图标库

@font-face {
	font-family:icomoon;
	src: url('../fonts/icomoon.eot') format('embedded-opentype'),
	url('../fonts/icomoon.svg') format('svg'),
	url('../fonts/icomoon.ttf') format('truetype'),
	url('../fonts/icomoon.woff') format('woff');
}
[class^="icon-"],
[class*=" icon-"]{
	font-family: icomoon;
	font-style: normal;
}
.icon-phone::before{
	content: "\e938";
	font-size: 13px;
}

三.运用定义好的图标

<span class="icon-phone"></span>
<span>关注微信</span>

结果：