1.首先新建一个css文件:
2.在阿里云此处复制代码:
并且加上:
全部代码:
@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格式引入的,你每一次更新新的图标,只要重新更新地址就好了,新的地址在阿里云官网,再复制过来就好
3.在main.js全局引入
import "./assets/css/font.css"
4.使用
/* 在要使用的地方<i class="iconfont">&#你要使用图标的Unicode代码;</i> */
原文:https://www.cnblogs.com/hmy-666/p/14467207.html