博客列表 >字体图标的引入方式Unicode和font class与显示

字体图标的引入方式Unicode和font class与显示

vbokok
vbokok原创
2023年02月12日 11:34:18341浏览
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <link rel="stylesheet" href="css/0208.css" />
  8. <title>字体图标</title>
  9. </head>
  10. <body>
  11. <div class="iconfont">
  12. <span class="icon-shoucang2 active"></span>
  13. </div>
  14. </body>
  15. </html>
  16. CSS:
  17. @import url(//at.alicdn.com/t/c/font_3890806_is94ruj2l7.css);
  18. .active {
  19. font-size: 3em;
  20. color: blueviolet;
  21. }

[========]

<!DOCTYPE html>
<html lang="zh-CN">
<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" />
<link rel="stylesheet" href="css/0208.css" />
<title>字体图标</title>
</head>
<body>
<div class="my-font">
<span></span>
</div>

  1. </body>
  2. </html>
  3. CSS:
  4. /* CDN 服务仅供平台体验和调试使用,平台不承诺服务的稳定性,企业客户需下载字体包自行发布使用并做好备份。 */
  5. @font-face {
  6. font-family: 'iconfont'; /* Project id 3890806 */
  7. src: url('//at.alicdn.com/t/c/font_3890806_is94ruj2l7.woff2?t=1676098400453') format('woff2'),
  8. url('//at.alicdn.com/t/c/font_3890806_is94ruj2l7.woff?t=1676098400453') format('woff'),
  9. url('//at.alicdn.com/t/c/font_3890806_is94ruj2l7.ttf?t=1676098400453') format('truetype');
  10. }
  11. .my-font {
  12. font-family: iconfont;
  13. color: red;
  14. font-size: 3em;
  15. }

[========]

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议