使用字体图标完整步骤 一、基础使用字体图标 二、追加字体图标
常用下载：
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>
效果：