icon-font

在icomoon中下载符号字体，

https//icomoon.io,因为是国外的网站，进入会比较慢，进入之后，点击右上角的icomoon app，

之后开始选择需要的图标，再点击右下角的下载，

 

之后解压，demo.html里面有图标的十六进制码，把fonts文件夹放在你网站的文件夹下。

在css中定义字体

@font-face {
    font-family: 'imooc-icon';
    src: url('../icomoon/fonts/icomoon.eot');/* IE9 Compat Modes */
    src: url('../icomoon/fonts/icomoon.eot?#iefix') format('embedded-opentype'),/* IE6-IE8 */
    url('../icomoon/fonts/icomoon.woff') format('woff'),/* Modern Browsers */
    url('../icomoon/fonts/icomoon.ttf') format('truetype'),/* Safari, Android, iOS */
    url('../icomoon/fonts/icomoon.svg#icomoon') format('svg');/* Legacy iOS */
    font-weight: normal;
    font-style: normal;
}

.imooc-icon
{
    font-family: 'imooc-icon';
    font-style: normal;
    font-weight: normal;
    font-size: 64px;
}

在htm中引入，引入时需要在十六进制码前加入  &#  ,不要忘记在末尾加分号哟。引入就完成了

<ul class="draw-icon">
   <li>
      <a href="">
         <i class="imooc-icon">&#xe902;</i>
      </a>
   </li>
   <li>
      <a href="">
         <i class="imooc-icon">&#xe905;</i>
      </a>
   </li>
   <li>
      <a href="">
         <i class="imooc-icon">&#xe90e;</i>
      </a>
   </li>
   <li>
      <a href="">
         <i class="imooc-icon">&#xe90f;</i>
      </a>
   </li>
   <li>
      <a href="">
         <i class="imooc-icon">&#xe910;</i>
      </a>
   </li>
   <li>
      <a href="">
         <i class="imooc-icon">&#xe911;</i>
      </a>
   </li>
   <li>
      <a href="">
         <i class="imooc-icon">&#xe913;</i>
      </a>
   </li>
   <li>
      <a href="">
         <i class="imooc-icon">&#xe91b;</i>
      </a>
   </li>
   
</ul>