字体图标

unicode

1. 拷贝css文件中的@font-face

   @font-face {
     font-family: 'iconfont';
     src: url('iconfont.ttf') format('truetype');
   }

2. 定义iconfont的样式，设置font-family

   .iconfont {
     font-family: "iconfont" !important;
     font-size: 16px;
     font-style: normal;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }

3. 挑选相应图标并获取字体编码，应用于页面

   <span class="iconfont">&#x33;</span>

Font class

• 引入项目下面生成的css样式

  <link rel="stylesheet" href="./iconfont.css">

• 挑选相应图标并获取类名，应用于页面

  <span class="iconfont icon-xxx"></span>

Symbol

• 引入项目下面生成的js样式

  <script src="./iconfont.js"></script>

• 加入通用的css代码，引入一次就行

  .icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }

• 挑选相应的图标并获取类名，应用于页面

  <svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xxx"></use>
  </svg>