移动web第一天字体图标 1.优点 2.font-class 3.案例-普通做法 4.案例-搭配伪元素 5.在线引入字体图标

移动web第一天

字体图标

1.优点

灵活随时更改颜色和尺寸
轻量级体积小
兼容性好

  <title>字体图标基本使用-类名</title>
    <!-- 1.引入iconfont.css文件 -->
    <link rel="stylesheet" href="./iconfont/iconfont.css" />
    <style>
      /* 3. 设置span标签的字体家族 */
      span {
        /* ff */
        font-family: 'iconfont';
      }

      /* 4. 修改字体颜色 */
      .s1 {
        color: red;
        font-size: 100px;
      }
    </style>
  </head>

  <body>
    <!-- 2.通过i标签把unicode编码复制过来 -->
    <span class="s1">&#xe600;</span>
    <span>&#xe60c;</span>
  </body>
</html>

2.font-class

<title>Document</title>
    <!-- 1引入iconfont.css文件 -->
    <link rel="stylesheet" href="./iconfont/iconfont.css" />
    <style>
      .s1 {
        color: yellow;
      }
    </style>
  </head>
  <body>
    <!-- 2 行内元素  必须要加上两个类名 iconfont icon-xxx -->
    <span class="iconfont icon-yanjing"></span>
    <span class="iconfont icon-yanjing s1"></span>
  </body>
</html>

3.案例-普通做法

<title>03-案例-购物车-普通做法.html</title>

    <!-- 1 引入字体图标的样式文件 -->
    <link rel="stylesheet" href="./iconfont/iconfont.css" />
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .box {
        width: 110px;
        border: 1px solid #ccc;
        padding: 10px 5px;
        margin: 100px auto;
      }
      /* 第一个字体图标 购物车 红色 */
      .cart {
        color: red;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <!-- 2 使用iconfont 类名方式  两个类  iconfont icon-xxx -->
      <i class="iconfont icon-gouwucheman cart"></i>
      <span>购物车</span>
      <i class="iconfont icon-jiantou9"></i>
    </div>
  </body>

4.案例-搭配伪元素

<title>04-案例-购物车-搭配伪元素</title>

    <!-- 1 引入字体图标的样式文件 -->
    <link rel="stylesheet" href="./iconfont/iconfont.css" />
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .box {
        width: 110px;
        border: 1px solid #ccc;
        padding: 10px 5px;
        margin: 100px auto;
      }
      /* 第一个字体图标 购物车 红色 */

      .cart-font::before {
        content: '\e600';
      }

      .cancle-font::before {
        content: '\e609';
      }
      .aaa {
        font-family: 'iconfont' !important;
        font-size: 16px;
      }
      .aaa-font123::before {
        content: '\e609';
      }
    </style>
  </head>
  <body>
    <div class="box">
      <i class="aaa cart-font"></i>
      <i class="aaa cancle-font"></i>
      <i class="aaa aaa-font123"></i>
    </div>
  </body>

font-class 实现原理:给对应的标签添加一个伪元素，给这个伪元素设置content属性，值等于字体图标unicode编码。

5.在线引入字体图标

 <title>05-在线引入字体图标.html</title>
    <!-- 1 引入在线的字体图标地址 -->
    <link
      rel="stylesheet"
      href="http://at.alicdn.com/t/font_3243645_8568gh9eemr.css"
    />
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <span class="iconfont icon-caidan"></span>
  </body>