步骤:
- 进入Icon Font & SVG Icon Sets ❍ IcoMoon
- 选择图标并生成字体
- 下载文件
- 将下载文件中的 fonts 文件夹复制到项目根目录下
- 打开style.css文件 字体声明,将
style.css
文件中的开头的字体声明代码赋值到 html 中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?cggue');
src: url('fonts/icomoon.eot?cggue#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?cggue') format('truetype'),
url('fonts/icomoon.woff?cggue') format('woff'),
url('fonts/icomoon.svg?cggue#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
</style>
</head>
<body>
</body>
</html>
6. 打开 demo.html
,复制页面中的方框图标到 html 代码中即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?cggue');
src: url('fonts/icomoon.eot?cggue#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?cggue') format('truetype'),
url('fonts/icomoon.woff?cggue') format('woff'),
url('fonts/icomoon.svg?cggue#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
</style>
</head>
<body>
<span></span>
<span>\e916</span>
</body>
</html>
7. 给 span
声明字体或者在伪元素选择器的content属性中添加字体代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?cggue');
src: url('fonts/icomoon.eot?cggue#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?cggue') format('truetype'),
url('fonts/icomoon.woff?cggue') format('woff'),
url('fonts/icomoon.svg?cggue#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
span {
font-family: 'icomoon';
color: pink;
}
span::after {
content: '\e916';
}
</style>
</head>
<body>
<span></span>
</body>
</html>
效果如下