【CSS】字体图标-引入第三方字体和图标：阿里图标字体

字体图标

1. 字体图标

- 阿里图标 <https://www.icofont.cn>
- Unicode, class
/*=============================================
=            一、Unicode                      =
=============================================*/
/* 1.安装自定义图标字体 */
/* CDN 服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
@font-face {
    /* 字体名称 */
    font-family: 'iconfont';  /* Project id 3778676 */
    /* 字体文件路径，可以是远程的，也可以是本地的 */
    src: url('//at.alicdn.com/t/c/font_3778676_xrrqstydj5.woff2?t=1668742255577') format('woff2'),
         url('//at.alicdn.com/t/c/font_3778676_xrrqstydj5.woff?t=1668742255577') format('woff'),
         url('//at.alicdn.com/t/c/font_3778676_xrrqstydj5.ttf?t=1668742255577') format('truetype');
  }
/* 安装自定义字体 */
@font-face {
    font-family: 'font-name';
    src: url('url');
}
/* 2. 声明自定义字体图标样式 */
 /* unicode */
 .iconfont.unicode {
    /* 必须先声明自定义的字体名称 */
    font-family: iconfont;
    font-size: large;
    color: green;
    text-shadow: #888;
 }
 /* class 最流行 */
 .iconfont.class {
    font-size: x-large;
    color: violet;
 }
 .iconfont.class:hover {
    font-size: x-large;
    color: red;
    transition: color 0.5s linear;
 }

HTML示例代码

<!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>Document</title>
    <!-- Unicode -->
    <link rel="stylesheet" href="css/font-icon.css">
    <!-- class -->
    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3778676_ydklqqrp7es.css">
</head>
<body>
    <!-- 1. Unicode -->
    <div class="iconfont unicode">
        <span>&#xe600;</span>
    </div>
    <hr>
    <!-- 2. class -->
    <div class="iconfont class">
        <span class="icon-shezhi"></span>
        <span class="icon-zhuce"></span>
    </div>
</body>
</html>

字体图标

1. 字体图标

HTML示例代码

相关文章