先下载一个字体图标
然后解压:
把fonts文件夹复制到同一级文件夹:html文件和字体文件一样的位置
然后双击打开style.css文件夹
把这第一段复制
然后粘贴到html文件的style中,即:
然后就是随便建个div
<style>
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?cl8nsq');
src: url('fonts/icomoon.eot?cl8nsq#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?cl8nsq') format('truetype'),
url('fonts/icomoon.woff?cl8nsq') format('woff'),
url('fonts/icomoon.svg?cl8nsq#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
div {
/* 父相 */
position: relative;
width: 200px;
height: 35px;
border: 1px solid red;
}
div::after {
/* 子绝 */
position: absolute;
top: 10px;
right: 10px;
font-size: 18px;
color: red;
/* 伪类选择器的font-family要和 @font-face的一样vvv */
font-family: 'icomoon';
content: '';
}
</style>
</head>
<body>
<div></div>
</body>
运行结果: