使用字体图标完整步骤

一、基础使用字体图标

常用下载：

https://icomoon.io/ 的ico的app即： https://icomoon.io/app/#/select
选择——创建——下载
https://www.iconfont.cn/

二、下载下来的字体解压

把内部的fonts文件夹拿出来放入项目根目录

三、在css里定义图标字体

复制二步解压出来的文件夹下的style.css把@font-face里的定义字体样式复制出来即可

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?qsnxg7');
  src:  url('fonts/icomoon.eot?qsnxg7#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?qsnxg7') format('truetype'),
    url('fonts/icomoon.woff?qsnxg7') format('woff'),
    url('fonts/icomoon.svg?qsnxg7#icomoon') format('svg');
}

四、使用图标字体，打开二步目录下的demo.html

找到对应的图标复制后面的口形符号，粘贴到想用图标的标签里

<div class='ico1'></div>

五、定义四步标签的字体为三步的字体

.ico1{
	font-family: 'icomoon';
	font-size: 108px;
	color:red;
}

六、完整代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
<style>
@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?qsnxg7');
  src:  url('fonts/icomoon.eot?qsnxg7#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?qsnxg7') format('truetype'),
    url('fonts/icomoon.woff?qsnxg7') format('woff'),
    url('fonts/icomoon.svg?qsnxg7#icomoon') format('svg');
}
.ico1{
	font-family: 'icomoon';
	font-size: 108px;
	color:red;
}
</style>

<div class="ico1"></div>
</body>
</html>