vuejs class_Vuejs的iconfont插件支持Font-class和Symbol

vuejs class

vue-icon-font (vue-icon-font)

A iconfont plugin for Vuejs.

Vuejs的iconfont插件。

vue-icon-font2

vue-icon-font1

vue-icon-font

安装 (Installation)

NPM(推荐) (NPM (Recommended))

# install dependencies
npm install vue-icon-font

手册 (manual)

# Download `dist/vue-iconfont.js` and include it in your HTML file
<script src="../dist/vue-iconfont.js"></script>

Iconfont资产 (Iconfont assets)

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.

screenshot

这是Alimama MUX制作的矢量图标管理与交流平台,设计人员可以在此处上传矢量图标,用户可以通过多种格式下载矢量图标,还可以将这些图标翻译成字体以供前端工程师使用。

Download the icons from iconfont.cn, and upzip download.zip.

从iconfont.cn下载图标, upzip download.zip

字体类 (font-class)

copy iconfont.css and font files (.ttf,.eot,.svg,.woff) into your project

iconfont.css和字体文件( .ttf, .eot, .svg, .woff)复制到您的项目中

# 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>

使用: <icon name="account" type="class"></icon>

symbol,svg(默认,推荐) (symbol,svg (Default,Recommended))

copy iconfont.js into your project

iconfont.js复制到您的项目中

# Include the iconfont.css stylsheet into your <head>
<link rel="stylesheet" href="./iconfont.css">

or

要么

import './iconfont.js';

use: <icon name="password"></icon>

使用: <icon name="password"></icon>

通过导入使用(vue-cli) (Usage via import (vue-cli))

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>

翻译自: https://vuejsexamples.com/a-iconfont-plugin-for-vuejs-support-font-class-and-symbol/

vuejs class

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值