字体图标的使用方法

<!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';
}

代码效果如下:

批改老师：

PHPz

批改状态：合格

老师批语：完成的没什么问题，继续加油

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

1.vs code的安装与配置。（包括插件）

2020-04-02 19:27:10