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/>'
})
           

在元件裡使用字型圖示