字体图标的使用方法

<!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>字体图标</title>
    <link rel="stylesheet" href="CSS/iconfont.css">
    <!-- class -->
    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3731085_cyyzlbf3d5u.css">
</head>
<body>
     <div class="iconfont unicode">
        <span> &#xe72a;</span>
        <span> &#xe72a;</span>
    </div>
    <hr>
    <div class="iconfont class">
        <span class="icon-drxx92"></span>
    </div>
</body>
</html>

/* CDN 服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
@font-face {
    font-family: 'iconfont';
    /* Project id 3731085 */
    src: url('//at.alicdn.com/t/c/font_3731085_cyyzlbf3d5u.woff2?t=1666775834576') format('woff2'),
        url('//at.alicdn.com/t/c/font_3731085_cyyzlbf3d5u.woff?t=1666775834576') format('woff'),
        url('//at.alicdn.com/t/c/font_3731085_cyyzlbf3d5u.ttf?t=1666775834576') format('truetype');
}
@font-face {
    font-family: 'fon-name';
    src: url('');
}
.iconfont .unicode {
font-family: 'iconfont';
color: aquamarine;
}
.iconfont .class {
    font-family: 'iconfont';
}

代码效果如下:

字体图标的使用方法

字体图标的使用方法

相关文章