移动web

字体图标

优点

1. 灵活 随时修改颜色和尺寸（color font-size）

2. 轻量级 体积小

3. 兼容性好

     <!-- 1.引入iconfont.css文件 -->
       <link rel="stylesheet" href="./iconfont/iconfont.css" />
       <style>
         /* 3.声明字体图标库 */
         i {
           font-family: iconfont;
           font-style: normal;
           font-size: 50px;
           color: yellow;
         }
       </style>
   
       <!-- 2.通过i标签把unicode编码复制过来 -->
       <i>&#xe600;</i>
   

2.font-class

   <!-- 1引入iconfont.css文件 -->
    <link rel="stylesheet" href="./iconfont/iconfont.css" />
    <style>
      .icon1 {
        font-size: 100px;
        color: antiquewhite;
      }
    </style>
    <!-- 
      2.通过i标签承接字体图标
        类名：
          第一个类名是固定的：iconfont;
          第二个类名：通过html文件，直接去复制文字下方的类名即可
     -->
    <i class="iconfont icon-hanbao icon1"></i>