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>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM