iconfont字体矢量图标的使用方法

打开阿里巴巴矢量图标库 https://www.iconfont.cn/

点击登录

使用github账号登录，其他账号也可以

找一组图标点击进去，添加入库

点击购物车图标

点击添加进项目，没有项目可以创建

这里选择的是Unicode引用，点击下载至本地

把下载好的文件解压出来，放到项目的css和fonts文件夹

注意iconfont.css里的文件路径

@font-face {font-family: "iconfont";
  src: url('./../fonts/iconfont.eot?t=1551842195237'); /* IE9 */
  src: url('./../fonts/iconfont.eot?t=1551842195237#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAdUAAsAAAAADaAAAA') format('woff2'),
  url('./../fonts/iconfont.woff?t=1552034083716') format('woff'),
  url('./../fonts/iconfont.ttf?t=1551842195237') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('./../fonts/iconfont.svg?t=1551842195237#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-search:before {
  content: "\e625";
}

.icon-star1:before {
  content: "\e681";
}

.icon-warn:before {
  content: "\e6c8";
}

在main.js文件里引用全局css

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './vuex'

import './assets/css/iconfont.css'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  store,
  router,
  components: { App },
  template: '<App/>'
})

在组件里使用字体图标

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