iconfont 无版权 字体图标使用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      @font-face {
        font-family: "iconfont1";
        src: url("./iconfont/iconfont.ttf") format("truetype");
      }
    </style>

    <style>
      .cart {
        padding-left: 16px;
        background-image: url(./img/购物车.png);
        background-repeat: no-repeat;
        background-position: left center;
      }

      .iconfont1 {
        font-family: "iconfont1";
        color: lightcoral;
        font-size: 32px;
      }
    </style>

    <link rel="stylesheet" href="./iconfont/iconfont.css" />
    <style>
      .icon-gouwuche,
      .icon-shouye,
      .icon-fenlei,
      .icon-wode {
        font-size: 32px;
        color: red;
      }
    </style>

    <script src="./iconfont/iconfont.js"></script>
    <style>
      .icon {
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
        font-size: 32px;
        color: red;
      }
    </style>
  </head>
  <body>
    <div>
      <h1>直接下载素材</h1>
      <svg
        t="1724814123928"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="4305"
        width="200"
        height="200"
      >
        <path
          d="M246.4 912a2.1 2.1 0 1 0 134.4 0 2.1 2.1 0 1 0-134.4 0Z"
          p-id="4306"
        ></path>
        <path
          d="M716.8 912a2.1 2.1 0 1 0 134.4 0 2.1 2.1 0 1 0-134.4 0Z"
          p-id="4307"
        ></path>
        <path
          d="M905.6 764.8l-537.6 0c-28.8 0-57.6-25.6-64-54.4l-96-566.4c-9.6-54.4-60.8-96-115.2-96l-22.4 0c-12.8 0-25.6 12.8-25.6 25.6 0 12.8 12.8 25.6 25.6 25.6l22.4 0c28.8 0 57.6 25.6 64 54.4l96 566.4c9.6 54.4 60.8 96 115.2 96l537.6 0c12.8 0 25.6-12.8 25.6-25.6C931.2 777.6 921.6 764.8 905.6 764.8z"
          p-id="4308"
        ></path>
        <path
          d="M880 179.2l-572.8 0c-12.8 0-25.6 12.8-25.6 25.6 0 12.8 12.8 25.6 25.6 25.6l572.8 0c25.6 0 38.4 16 32 41.6l-70.4 281.6c-6.4 32-41.6 57.6-73.6 60.8l-396.8 28.8c-12.8 0-25.6 12.8-22.4 28.8 0 12.8 12.8 25.6 28.8 22.4l396.8-28.8c54.4-3.2 105.6-48 118.4-99.2l70.4-281.6C976 230.4 937.6 179.2 880 179.2z"
          p-id="4309"
        ></path>
      </svg>
      <img src="./img/购物车.png" alt="" />
      <span class="cart">购物车</span>
    </div>

    <div>
      <h1>使用代码</h1>

      <h2>unicode使用</h2>
      <div>
        <span class="iconfont1">&#xe63f;</span>
        <span class="iconfont1">&#xe612;</span>
        <span class="iconfont1">&#xe71b;</span>
        <span class="iconfont1">&#xe602;</span>
        <span class="iconfont1">&#xe718;</span>

        
      </div>

      <h2>fontclass</h2>
      <div>
        <span class="iconfont icon-gouwuche"></span>
        <span class="iconfont icon-shouye"></span>
        <span class="iconfont icon-fenlei"></span>
        <span class="iconfont icon-wode"></span>
        <span class="iconfont icon-qizhi"></span>
      </div>

      <h2>symbol</h2>
      <div>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-gouwuche"></use>
        </svg>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-shouye"></use>
        </svg>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-fenlei"></use>
        </svg>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-wode"></use>
        </svg>
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-qizhi"></use>
          </svg>
      </div>
    </div>
  </body>
</html>

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

码农NoError

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值