码迷,mamicode.com
首页 > Web开发 > 详细

在vuejs 中使用Font Awesome字体图标

时间:2018-04-10 16:29:34      阅读:943      评论:0      收藏:0      [点我收藏+]

标签:horizon   使用   vuejs   component   访问   color   图标   efault   dash   

安装

npm install vue-awesome

引入

import Vue from ‘vue‘

/* 在下面两种方式中任选一种 */

// 仅引入用到的图标以减小打包体积
import ‘vue-awesome/icons/flag‘

// 或者在不关心打包体积时一次引入全部图标
import ‘vue-awesome/icons‘

/* 任选一种注册组件的方式 */

import Icon from ‘vue-awesome/components/Icon‘

// 全局注册(在 `main .js` 文件中)
Vue.component(‘icon‘, Icon)

// 或局部注册(在组件文件中)
export default {
  components: {
    Icon
  }
}

使用方法

<!-- 基础用法 -->
<icon name="beer"></icon>

<!-- 添加选项 -->
<icon name="sync" scale="2" spin></icon>
<icon name="comment" flip="horizontal"></icon>
<icon name="code-branch" label="Forked Repository"></icon>

<!-- 堆叠图标 -->
<icon label="No Photos">
  <icon name="camera"></icon>
  <icon name="ban" scale="2" class="alert"></icon>
</icon>

旋转动画

<icon name="spinner" spin></icon>
<icon name="spinner" pulse></icon>

其他图标

请访问 Font Awesome 官网以查询可以使用的 name 值,如 beerfilecamera 等。

在vuejs 中使用Font Awesome字体图标

标签:horizon   使用   vuejs   component   访问   color   图标   efault   dash   

原文地址:https://www.cnblogs.com/yinian/p/8780103.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!