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. Exponential Distribution指数分布

    sklearn实战-乳腺癌细胞数据挖掘(博主亲自录制视频教程) https://study.163.com/course/introduction.htm?courseId=1005269003&am ...

  2. 使用L2正则化和平均滑动模型的LeNet-5MNIST手写数字识别模型

    使用L2正则化和平均滑动模型的LeNet-5MNIST手写数字识别模型 觉得有用的话,欢迎一起讨论相互学习~Follow Me 参考文献Tensorflow实战Google深度学习框架 实验平台: T ...

  3. DHCP及DHCP多作用域服务器工作原理

    一.DHCP服务是什么 DHCP称为动态主机配置协议.DHCP服务允许工作站连接到网络并且自动获取一个IP地址.配置DHCP服务的服务器可以为每一个网络客户提供一个IP地址.子网掩码.缺省网关.一个W ...

  4. Python学习笔记(四十三)virtualenv (创建一套“隔离”的Python运行环境)

    摘抄自:https://www.liaoxuefeng.com/wiki/0014316089557264a6b348958f449949df42a6d3a2e542c000/001432712108 ...

  5. JAVA中反射机制二

    声明:如需转载请说明地址来源:http://www.cnblogs.com/pony1223 反射二 利用反射创建对象 1.利用反射创建对象,首先我们创建一个类,类里面,我们知道构造函数有默认的构造函 ...

  6. Spark 基本架构及原理

    转载自: http://blog.csdn.net/swing2008/article/details/60869183 转自:http://www.cnblogs.com/tgzhu/p/58183 ...

  7. Mock InjectMocks ( @Mock 和 @InjectMocks )区别

    之前一直对这两个注解的区别不是很明白. 搜到过一篇博客园的文章举例说明了代码行为的区别.后来在stackoverflow上看到一个问答简单明了的解释了这两个注解在定义上的区别: 在此翻译记录一下: / ...

  8. 使用Docker 快速搭建nuget本地服务器,Hosting private nuget server using docker in seconds!

    Server #below line automatically creates the folder, mount the volumes and maps the ports. docker ru ...

  9. wget下载整个网站或特定目录

    下载整个网站或特定目录 wget -c -k -r -np -p http://www.yoursite.com/path -c, –continue 断点下载 -k, –convert-links ...

  10. linux驱动开发:用户空间操作LCD显示简单的图片【转】

    转自:http://blog.csdn.net/changliang7731/article/details/53074616 上一章我们简单介绍了LCD的一些基本原理.当然更深奥的还有,比如gamm ...