nuxtjs引入阿里图标iconfont，外部在线链接地址的方式引入

Font class 的方式

1. 复制图标链接地址

   

2. 打开

   nuxt.config.js

   文件，在里面

   link

   的位置添加外部css链接地址

   如下：

   

3. 在页面中使用图标

   // iconfont是图标项目的默认Font Family; icon-xxx是图标的名称
   <i class="iconfont icon-xxx"></i>
              

Symbol 的方式

1. 复制图标链接地址

   

2. 打开

   nuxt.config.js

   文件，在里面

   script

   的位置添加外部js链接地址

   script: [
     { src: 'https://at.alicdn.com/t/font_3187302_ni4q1z7yo1.js' }
   ]
              

   如下：

   

3. 在项目中加入通用css代码（引入一次就行）

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

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

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