利用iconfont拓展（自定义）web项目图标

统一规范要求如下：

1. 样式文件命名建议为el-expand-iconfont.css
2. css类名建议和elmentui保持一致。如 .el-icon-model-view
3. 自定义图标大小和elementui图标大小保持一致。14px？
4. 鼠标浮在图标上的效果和系统中的其他效果相同。 由#409EFF变为 #66B1FF

下载iconfont图标压缩包

• 在iconfont上传自定义svg等格式的ui设计稿，或者下载别人的小图标。

1. 添加到 库 ，进入项目

2. 下载到本地

开始在web项目中使用

1. 解压得到关键的css文件
   
2. 将该css文件引入到项目中。稍作修改。
   2.1 css文件

 @font-face {
	font-family: "el-expand-iconfont";
	src: url('iconfont.eot?t=1554280941007');
	/* IE9 */
	src: url('iconfont.eot?t=1554280941007#iefix') format('embedded-opentype'), /* IE6-IE8 */
	url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAR0AAsAAAAACUAAAAQnAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDHAqEaIQBATYCJAMQCwoABCAFhWUHZBsHCMgOJUHBwABgAABgPPz/Meq+/99EJEXinPHCKq0EGcCltaT1NU1casD8+ff0T5pBSIcvwcXm4KZ1mraDs/09wPiS/+eY8er5cJbflm6RjZlUJRRtDVKX4ZnAN5ET8xvGLi/yagKtJkXCNoorG8FG0ncKxKNKQYJNQisrsKFZ0VhwZI5hU8FSc3kmugjgubf9+AXxYUPRUOnX2r0uYiD3q+Prc7jwX9Bax0AYzgx2HBVLQBK3hdZzeOBbgmuVIy2sAM2GuTDUSOTrc///Y/5WpM34Xx5FqEQjXdqOMMuSemA8i0LhaySF4Os5rQpRubkZPcA7AH8BZlzcYGQ2DdknWFg3Nqb+U9rbOzPy6fZt6ZKY2V7S2aMbJnhKNlywv3VLcvNm886rAYuuJe25MXpdJqwdv94P6wSPEcgwx3vVOmGtR6PHzJUeq728qNn4FWdj+IsF3vScVZ5zPMlZnp6zPHpJnKJne3WS3nSfE6tBzr2OLQ7N8qYWiXzAiXWWOzY79ElzJNJpI+7ckd26BaN95MmbxLJbRWfuhC6/3RlG4TQJ9nHeKSJlzVKQBJxEY8JVoQpTqrFae4vVBGnTQfE48UGZ3LQ6pIBlsJyfVBW+dYGDw5tty+Y3L0ib4tYT2oN9q9q2+s5dSQO25qoLGxL+qTgcyjePwn7xjPuz5CK5Q0/A6t0zn55eOW/pqqn38hPZMtvEPKp6p695Yz1/xK5le8q355dtgfgvQrDTrQgb6/dhcdiazXvzd17h9uZMnvBhlSTWepE4yk+MXfR/rMqcZZUKaW/zenoSe3t/u0kwrQmrFsl4dQ3WjCu7y7FajV6SL5SW2tgAueClBT8/lLNYkbPAwE/PPTpyhG2Ht0S3TP0/kmtqg4Lc5WAA+C/Ub/gYxaUeFwKH61E87ydYZ+XVwM4O58yvNvYPoenz+ekfEbe5bQzgTfJk3ivPSh3A//+p5wS6LlOSqJRn8xjplDX0FLQaTv4jZ6/HQ8gH5ERCL88Iiiaz4ipjosUJMbnQoM0+NOrVBq0Wcce36TMfcJEtWLAJQJhyB4pOv6GaCltEYqKgwWDUiRuLMApodRwTzthmJp7ZFRgRaUYMQfURKprTs+aOZjukjUK9BlLPRKVnqUeKLi1pzC0ibkOKjCYVpyfiomNLgiVIj4xTHWLqVsSbzSzBGjkdUdzTdbQcYTByakSbo5VmsyE9JoYtuqdomtOBnXVGCMkMYRAofQgqNI4e6zCb2bmiFfXbvQxIeoyoBoj6WIUuWuSAZTYuGyKkPiMTlbJ4QpxosZ0QJVJ9x4Jb+0uTbgrxzMxYBJYRR4dQvCiCFofgFK9SQ2hm0ZQdPAbpYoxGbFNp9PRy3dvpglb6sowSNTIa9FyjO0rHMRc73oRII630yKgZdEXDBs6EnLWobhXqAQAA') format('woff2'), url('iconfont.woff?t=1554280941007') format('woff'), url('iconfont.ttf?t=1554280941007') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
	url('iconfont.svg?t=1554280941007#el-expand-iconfont') format('svg');
	/* iOS 4.1- */
}

.el-expand-iconfont {
	font-family: "el-expand-iconfont" !important;
	font-size: 14px;
	color: #409EFF; /* 和系统现有 按钮、图标样式保持一致 */ 
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.el-icon-model-search:before {
	content: "\e62c";
}

.el-icon-model-decompose:before {
	content: "\e60d";
}

.el-icon-model-view:before {
	content: "\e6c9";
}

.el-icon-model-decompose:hover,
.el-icon-model-search:hover,
.el-icon-model-view:hover { 
	color: #66B1FF; /* 和系统现有 按钮、图标样式保持一致 */ 
	cursor: pointer;
}

2.2 html文件

<p>
		<span class="el-expand-iconfont el-icon-model-view">模型预览</span>
		<span class="el-expand-iconfont el-icon-model-search">模型查询</span>
		<span class="el-expand-iconfont el-icon-model-decompose">模型分解</span>
	</p>

2.3 展示效果