伪元素添加字体图标案例

最新推荐文章于 2023-04-20 21:56:44 发布

不停喝水

最新推荐文章于 2023-04-20 21:56:44 发布

阅读量1.4k

点赞数 1

分类专栏： # 【HTML5】 # 【CSS】文章标签： css html

本文链接：https://blog.csdn.net/weixin_48200589/article/details/106946351

版权

【HTML5】同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

【CSS】

25 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      @font-face {
        font-family: "iconfont"; /* project id 1898238 */
        src: url("//at.alicdn.com/t/font_1898238_w7e9ha2r4q.eot");
        src: url("//at.alicdn.com/t/font_1898238_w7e9ha2r4q.eot?#iefix")
            format("embedded-opentype"),
          url("//at.alicdn.com/t/font_1898238_w7e9ha2r4q.woff2") format("woff2"),
          url("//at.alicdn.com/t/font_1898238_w7e9ha2r4q.woff") format("woff"),
          url("//at.alicdn.com/t/font_1898238_w7e9ha2r4q.ttf")
            format("truetype"),
          url("//at.alicdn.com/t/font_1898238_w7e9ha2r4q.svg#iconfont")
            format("svg");
      }
      * {
        margin: 0;
        padding: 0;
      }
      .box,
      .nav,
      .box2 {
        position: relative;
        width: 200px;
        height: 50px;
        border: 1px solid #ccc;
      }
      .icondianzan::before {
        content: "\e637";
        font-family: "iconfont";
        position: absolute;
        top: 10px;
        right: 10px;
        font-size: 25px;
        color: red;
      }
      .iconhuo::after {
        content: "\e637";
        font-family: "iconfont";
        position: absolute;
        top: 10px;
        right: 10px;
        font-size: 25px;
        color: red;
      }
      /* .iconjiantouarrowhead7::before {
        position: absolute;
        top: 15px;
        left: 0;
        font-size: 25px;
      } */
      /* .iconjiantou::after {
        content: "\e61f";
        position: absolute;
        top: 0;
        right: 0;
        font-size: 25px;
      } */
    </style>
  </head>
  <body>
    <div class="box iconfont icondianzan"></div>
    <div class="nav iconfont iconhuo"></div>
    <div class="box2 iconfont iconjiantouarrowhead7"></div>
  </body>
</html>

不停喝水

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
伪元素添加字体图标案例

<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> @font-face
复制链接

扫一扫