<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>icon font test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./iconfont.css">
    <style>
      .icon_lists{
        display: flex;
        flex-wrap: wrap;
      }
        .icon_lists li{
          /* float:left; */
          /* display: flex; */
          min-width: 100px;
          height:150px;
          text-align: center;
          list-style: none;
        }
        .icon_lists .iconfont{
          font-size: 42px;
          margin: 10px;
          color:#333;
          -webkit-transition: font-size 0.25s ease-out 0s;
          -moz-transition: font-size 0.25s ease-out 0s;
          transition: font-size 0.25s ease-out 0s;

        }
        .icon_lists .iconfont:hover{
          font-size: 100px;
        }
        .name {
          font-size: 16px;
        }
    </style>
</head>

<body>
    <h2>Icon Font</h2>
    <ul class="icon_lists clear">
    
       <li class="iconfont icon-arrowBack">
          <div class="name">0:arrowBack</div>
       </li>
    
       <li class="iconfont icon-check">
          <div class="name">1:check</div>
       </li>
    
       <li class="iconfont icon-close">
          <div class="name">2:close</div>
       </li>
    
       <li class="iconfont icon-down">
          <div class="name">3:down</div>
       </li>
    
       <li class="iconfont icon-image">
          <div class="name">4:image</div>
       </li>
    
       <li class="iconfont icon-play">
          <div class="name">5:play</div>
       </li>
    
       <li class="iconfont icon-refresh">
          <div class="name">6:refresh</div>
       </li>
    
       <li class="iconfont icon-warn">
          <div class="name">7:warn</div>
       </li>
    
    </ul>
   <div>
     <h2>使用方法</h2>
     <pre>
      &lt;span class=&quot;iconfont icon-iconName>&quot;&gt;&lt;/span&gt;
     </pre> 
   </div>    
</body>
</html>