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>