Vue在線引入阿里雲圖標庫，外鏈方式引入

一、引入單色圖標

1.首先新建一個css文件：

 

2.在阿里雲此處復制代碼：

 

 並且加上：

/* 定義阿里雲圖標樣式 */

.iconfont{

  font-family:"iconfont" !important;

  font-size:1rem;font-style:normal;

  -webkit-font-smoothing: antialiased;

  -webkit-text-stroke-width: 0.2px;

  -moz-osx-font-smoothing: grayscale;

}

這樣就可以全局使用了。

 全部代碼：

@font-face {
  font-family: 'iconfont';  /* project id 2391663 */
  src: url('//at.alicdn.com/t/font_2391663_gcrvq4t40th.eot');
  src: url('//at.alicdn.com/t/font_2391663_gcrvq4t40th.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_2391663_gcrvq4t40th.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_2391663_gcrvq4t40th.woff') format('woff'),
  url('//at.alicdn.com/t/font_2391663_gcrvq4t40th.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_2391663_gcrvq4t40th.svg#iconfont') format('svg');
}
/* 定義阿里雲圖標樣式 */
.iconfont{
  font-family:"iconfont" !important;
  font-size:1rem;font-style:normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}
/* 在要使用的地方<i class="iconfont">&#x33;</i> */

注：此處引入的格式是以Unicode格式引入的，你每一次更新新的圖標，只要重新更新地址就好了，新的地址在阿里雲官網，再復制過來就好

 注：Unicode只會顯示單色圖標

3.在main.js全局引入

import "./assets/css/font.css"

4.使用

/* 在要使用的地方<i class="iconfont">&#你要使用圖標的Unicode代碼;</i> */

 

二、阿里雲多色圖標引入：

在index.html引入js

 

 

創建一個css用於定義阿里雲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>

三、混合引入：

在main.js引入一個css文件，文件內容：

@font-face {
  font-family: 'iconfont';  
  src: url('//at.alicdn.com/t/font_2391663_0liqxcc5ill.eot');
  src: url('//at.alicdn.com/t/font_2391663_0liqxcc5ill.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_2391663_0liqxcc5ill.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_2391663_0liqxcc5ill.woff') format('woff'),
  url('//at.alicdn.com/t/font_2391663_0liqxcc5ill.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_2391663_0liqxcc5ill.svg#iconfont') format('svg');
} 
/* 定義阿里雲Unicode圖標樣式 */
.iconfont{
  font-family:"iconfont" !important;
  font-size:1rem;font-style:normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}
/* /* 在要使用的地方<i class="iconfont">&#x33;</i> */

/* 阿里雲svg多色圖標定義 */
.icon {
  width: 1em; height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

在頁面要使用單色Unicode圖標時使用語法：

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

在頁面要使用多色svg圖標時使用語法：

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

是否幫到你了？幫到就點個贊吧。

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