程序实现

<!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" />
    <title>字体图标的使用</title>
    <link
      rel="stylesheet"
      href="//at.alicdn.com/t/c/font_3958903_50kcu2wlrhj.css"
    />
  </head>
  <style>
    * {
      box-sizing: border-box;
      padding: 0;
      margin: 0;
    }
    .icon-a-business-icon-Bigpromotion {
      color: aqua;
      font-size: 2em;
      /* margin-left: 100px; */
    }
    .icon-cart-empty,
    .icon-cart-empty-fill {
      color: skyblue;
      font-size: 2em;
    }
    .empty {
      font-size: 14px;
    }
    .catalog {
      color: green;
      font-size: 2rem;
    }
    html {
      font-size: 18px;
    }
    .icon-customer-businessman-fill:hover {
      color: red;
      cursor: pointer;
      font-size: 2em;
      transition: 0.3s;
    }
    .icon-hot-for-ux-fill:hover {
      display: inline-block;
      width: 20vw;
      height: 20vh;
      transition: 2s;
      background-color: lightgreen;
      cursor: pointer;
    }
  </style>
  <body>
    <ul>
      <li class="business">
        <span class="iconfont icon-a-business-icon-Bigpromotion">business</span>
      </li>
      <li class="cart empty">
        <span class="iconfont icon-cart-empty">cart empty</span>
      </li>
      <li class="cart fill">
        <span class="iconfont icon-cart-empty-fill">cart full</span>
      </li>
      <li class="catalog">
        <span class="iconfont icon-catalog">catalog</span>
      </li>
      <li class="businessman">
        <span class="iconfont icon-customer-businessman-fill">businessman</span>
      </li>
      <li class="hot fill">
        <span class="iconfont icon-hot-for-ux-fill">hot fill</span>
      </li>
      <li class="hot atmosphere">
        <span class="iconfont icon-hot-for-atmosphere">hot atmosphere</span>
      </li>
    </ul>
  </body>
</html>

效果图

效果1

字体图标效果1

效果2

字体图标效果2

注意点

font-size 不能被继承
如果iconfont.cn网站上项目删了，是不是图标就失效了？

批改老师：

PHPz

批改状态：合格

老师批语：

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

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

0条评论

作者最新博文

开学第一课

2023-03-10 16:14:27