Vue-Awesome建立在Font Awesome上 v4.5.0，取决于Vue.js v2.0.1 +，所以安装了Vue-Awesome就可以直接使用Font Awesome的字体图标。

1.安装Vue-Awesome

　　$ npm install vue-awesome

2.引入Vue-Awesome

　　在main.js文件中加入以下代码：

　　　　import 'vue-awesome/icons'
　　　　import Icon from 'vue-awesome/components/Icon'

　　　　Vue.component('icon', Icon)

3.使用

　　<icon :name="refresh"  scale="2"></icon>               //scale:图标大小1，2，3。。。

　　<icon :name="refresh"  spin></icon>               //spin:图标旋转

　　<icon :name="refresh"  flip="horizontal"></icon>               //flip:翻转

vue引入Vue-Awesome的更多相关文章

  1. 在普通js文件里引入vue实例的方法

    首先是我是写了一个 Loading 插件然后 是挂在打vue.prototype 原型上的. 在main.js中use使用了这个插件. 至此vue原型是就被我挂上 $loadding方法了. 然后我想 ...

  2. vue学习记录：vue引入，validator验证，数据信息，vuex数据共享

    最近在学习vue,关于学习过程中所遇到的问题进行记录,包含vue引入,validator验证,数据信息,vuex数据共享,传值问题记录 1.vue 引入vue vue的大致形式如下: <temp ...

  3. vue引入bootstrap——webpack

    想要在vue中引入bootstrap,引入的时候需要按照如下的步骤进行. 1.引入jquery 2.引入bootstrap   阅读本文前,应该能够搭建环境,使用vue-cli进行项目的创建,可以参考 ...

  4. 记webpack下引入vue的方法（非.vue文件方式）

    直接script引入下载静态的vue.js文件则最后用copy-webpack-plugin复制到一样的目录即可 使用npm安装的vue无法直接用 import vue from "vue& ...

  5. 单页面vue引入百度统计的使用方法！

    最近组长安排着做一个项目,h5的应用下载项目,想着做起来还是比较容易,可是看到提出的需求,我就有点懵逼了!需要对应用的下载进行统计!!!我当时就想着我前端怎么对页面点击按钮就行数据统计啊!我以前的项目 ...

  6. vue引入jquery的方法

    1.局部引入 通过命令下载jquery   npm install jquery --save-dev 在需要引入jquery的组件中通过import $ from 'jquery'引入即可 2.全局 ...

  7. vue 引入通用 css

    1.在入口 js 文件 main.js 中引入,一些公共的样式文件,可以在这里引入. import Vue from 'vue' import App from './App' // 引入App这个组 ...

  8. vue引入jQuery、bootstrap

    vue引入jQuery.bootstrap 1.使用vue-cli构建的vue项目 2.npm安装jquery.bootstrap npm install jquery 3.修改build/webpa ...

  9. vue 引入 mint-ui 简单使用

    一 npm 方式 1,安装依赖 (已有项目) 如果想简单体验:基于vue-cli /* npm install vue -g npm install vue-cli   -g   // -g 是否全局 ...

  10. 不再手写import - VSCode自动引入Vue组件和Js模块

    :first-child{margin-top:0!important}.markdown-body>:last-child{margin-bottom:0!important}.markdow ...

随机推荐

  1. duilib CDateTimeUI 在Xp下的bug修复

    转自:http://my.oschina.net/u/343244/blog/370131 CDateTimeUI 的bug修复.修改CDateTimeWnd的HandleMessage方法 ? 1 ...

  2. 前端PHP入门-019-内置函数之数学函数-很重要

    查看帮助文档为主 函数名 描述 实例 输入 输出 abs() 求绝对值 $abs = abs(-4.2); //4.2 数字 绝对值数字 ceil() 进一法取整 echo ceil(9.999); ...

  3. C++对象与其第一个非静态成员地址相同

    由于对象的内存空间里是按顺序依次存储了它的非静态成员变量,因此对象和它的第一个非静态成员变量的地址是相同的: class A { private: int i; } int main() { A a; ...

  4. swift开发常用代码片段

    // 绑定事件 cell.privacySwitch.addTarget(self, action: #selector(RSMeSettingPrivacyViewController.switch ...

  5. Hadoop 遇到的问题集

    1. Mac 使用ssh命令无法成功 ssh localhost,但是可以ssh其他的 可能原因:ssh服务未启动 解决方法: 1.启动sshd服务: sudo launchctl load -w / ...

  6. Anaconda更换版本方式

    Conda的环境管理 Conda的环境管理功能允许我们同时安装若干不同版本的Python,并能自由切换.假设我们需要安装Python 3.6,此时,我们需要做的操作如下: # 创建一个名为python ...

  7. jieba文本分词，去除停用词，添加用户词

    import jieba from collections import Counter from wordcloud import WordCloud import matplotlib.pyplo ...

  8. web上下文监听器ServletContextListener

    1 package com.liveyc.common.listener; import javax.servlet.ServletContextEvent; import javax.servlet ...

  9. windows下面安装Python和pip教程

    第一步,先来安装Python.windows下面的Python安装一般是通过软件安装包安装而不是命令行,所以首先要在Python的官方主页上面下载最新的Python安装包.下载地址是:https:// ...

  10. 【Windows使用笔记】神舟笔记本的control center

    首先,神船大法好. 然后,因为我的船风扇声音有点大啊,在实验室感觉就很吵,但是它的背板温度又不是很高,所以想设置下风扇的启动. 所以需要用到神船自带的control center软件. 长这样. 应该 ...