设计经验：在项目中使用iconfont字体图标-Symbol 引用方式

      如何在项目中使用iconfont字体图标，本文就这一问题整理出来比较详细的使用方法和经验。从iconfont官方表时，Symbol 引用是一种全新的iconfont的使用方式，这是将是未来的主流，也是iconfont平台目前推荐的用法。

Symbol 引用具有如下特点：

• 支持多色图标了，不再受单色限制。
• 通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
• 兼容性较差，支持 IE9+，及现代浏览器。
• 浏览器渲染 SVG 的性能一般，还不如 png。

使用步骤如下：

第一步：打开https://www.iconfont.cn/网站，并注册登录。

第二步：在资源管理页面，新建项目,并将选定的图标添加入库，然后将项目下载到本地。

第三步：将下载到本地的文件解压后打开，首页将iconfont.js文件拷贝到本地项目中的js文件夹中，并做好引用。

<!-- 引入 symbol 代码（iconfont.js文件） -->
<script type="text/javascript" src="/static/admin/js/iconfont.js"></script>

第四步：在样式表中加入通用 CSS 代码（可根据页面需要调整）：

.icon {
 width: 1em; height: 1em;
 fill: currentColor;
 overflow: hidden;
 display: inline-block;
 vertical-align: middle;
 min-width: 30px;
 text-align: center;
 font-size: 20px;
 font-weight: normal;
 margin-right: 2px;
}

第五步：进入解压出来的文件夹，打开demo_index文件挑选相应图标并获取图标名称，应用于页面：

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

最后，查看图标效果