<!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">
    <% _.each(icons, function(icon,idx) { %>
       <li class="iconfont icon-<%= icon %>">
          <div class="name"><%= idx%>:<%= icon%></div>
       </li>
    <% }); %>
    </ul>
   <div>
     <h2>使用方法</h2>
     <pre>
      &lt;span class=&quot;iconfont icon-iconName>&quot;&gt;&lt;/span&gt;
     </pre> 
   </div>    
</body>
</html>