一、引入單色圖標
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">3</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">3</i> */ /* 阿里雲svg多色圖標定義 */ .icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; }
在頁面要使用單色Unicode圖標時使用語法:
<span class="iconfont">3</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>