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. Covariance 协方差分析

    sklearn实战-乳腺癌细胞数据挖掘 https://study.163.com/course/introduction.htm?courseId=1005269003&utm_campai ...

  2. Spring 源码学习(2) —— FactoryBean 的使用

    一般情况下, Spring是通过反射机制利用bean的class属性指定实现类来完成实例化bean的.在某些特定的情况下, 想做一些定制,Spring为此提供了一个org.springframewor ...

  3. HTML5标签的兼容处理

    /* 当使用HTML5标签时为了兼容问题必须声明告诉浏览器这是标签 html5shiv.js这个插件已经帮你声明了所有HTML5的标签不需要自己声明 */ /* 这是告诉浏览器这是一个标签 */doc ...

  4. Oracle用imp导入dmp 提示遇到 ORACLE 错误 12560 TNS: 协议适配器错误 解决方法

    用imp命令导入dmp文件时提示以下错误: IMP-00058: 遇到 ORACLE 错误 12560 : ORA-12560: TNS: 协议适配器错误 : IMP-00000: 未成功终止导入 : ...

  5. KMP next表模板

    void makeNext(const char P[],int next[]) { int q,k;//q:模版字符串下标:k:最大前后缀长度 int m = strlen(P);//模版字符串长度 ...

  6. 原生js写的一个简单slider

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 【CODEVS】1033 蚯蚓的游戏问题

    [算法]网络流-最小费用最大流(费用流) [题解]与方格取数2类似 在S后添加辅助点S_,限流k 每条边不能重复走,限流1 #include<cstdio> #include<alg ...

  8. MQTT协议及推送服务

    MQTT(Message Queuing Telemetry Transport,消息队列遥测传输协议),是一种基于发布/订阅(publish/subscribe)模式的“轻量级”通讯协议,该协议构建 ...

  9. linux下C语言实现的内存池【转】

    转自:http://blog.chinaunix.net/uid-28458801-id-4254501.html 操作系统:ubuntu10.04 前言:     在通信过程中,无法知道将会接收到的 ...

  10. juery给所有ID属性相同的div绑定一个事件

    案例: <div id="div1">内容</div> <div id="div1">内容</div> < ...