# install dependencies
npm install vue-icon-font
# Download `dist/vue-iconfont.js` and include it in your HTML file
<script src="../dist/vue-iconfont.js"></script>
It’s a Vector Icon Management & Communication Platform made by Alimama MUX, designers could upload vector icons here, and users could download it by several kinds of format.Also, the icons could be translated into Fonts for front-end engineers’ usage.
Download the icons from iconfont.cn, and
upzip download.zip
.
copy
iconfont.css
and font files (.ttf,.eot,.svg,.woff) into your project
# Include the iconfont.css stylsheet into your <head>
<link rel="stylesheet" href="./iconfont.css">
or
# Import css
import './iconfont.css';
use: <icon name="account" type="class"></icon>
copy
iconfont.js
into your project
# Include the iconfont.css stylsheet into your <head>
<link rel="stylesheet" href="./iconfont.css">
or
import './iconfont.js';
use: <icon name="password"></icon>
import Vue from 'vue'
import VueIconFont from 'vue-icon-font'
Vue.use(VueIconFont)
/* font-class */
import '@/assets/iconfont/iconfont.css'
/* symbol,svg */
import '@/assets/iconfont/iconfont.js'
<!-- font-class -->
<icon name="account" type="class"></icon>
<!-- symbol,svg -->
<icon name="password"></icon>
Simple demo here