Vue使用iconfont彩色图标

发表日期:2018年5月2日 08:50

将从iconfont网站下载的iconfont.js文件复制到src目录下assets文件夹下

在main.js引入iconfont.js

import './assets/styles/iconfont/iconfont.js'

在template中需要使用图标的位置插入图标

<template>
  <span class="img-1">
            <svg class="img">
        <use xlink:href="#icon-kaoqinyichang"></use>
    </svg>
  </span>
</template>

#icon-kaoqinyichang是要使用的图表名称,可以在iconfont网站复制粘贴下来。

最后一步是在style中根据需要写CSS

<style lang="stylus">
.img-1
    margin-left 100px
.img
    width 1rem
    height 1rem
</style>