使用CSS3伪元素引入阿里巴巴的字体图标
字体图标引入的多种方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./iconfont/iconfont.css">
<style>
@font-face {
font-family: 'iconfont';
src: url('iconfont.eot');
src: url('iconfont.eot?#iefix') format('embedded-opentype'),
url('iconfont.woff2') format('woff2'),
url('iconfont.woff') format('woff'),
url('iconfont.ttf') format('truetype'),
url('iconfont.svg#iconfont') format('svg');
}
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
div {
position: relative;
width: 150px;
height: 20px;
margin: 100px auto;
border: 1px solid red;
}
div::after {
position: absolute;
right: 5px;
color: blue;
font-size: 18px;
content: '\e614';
font-family: 'iconfont';
}
</style>
</head>
<body>
<div class="iconfont"></div>
</body>
</html>