vue 使用font-awesome
1.npm 安装font-awesome 以及需要的所有依赖
npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/vue-fontawesome
2.在入口文件main.js里面引入相关的样式
import Vue from 'vue'
import App from './App'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' library.add(faCoffee) Vue.component('font-awesome-icon', FontAwesomeIcon) Vue.config.productionTip = false /* eslint-disable no-new */
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})
如此,就可以愉快的使用了。
<div id="app">
<font-awesome-icon icon="coffee" />
</div>
</template> <script>
export default {
name: 'App'
}
</script>
vue 使用font-awesome的更多相关文章
- 关于vue项目font字体图标库导入未显示的问题
运行项目时,弹出以下信息:
- vue的基本指令
1.创建vue对象 <script src="vue.js"></script> var vm = new Vue({ el:"#ap ...
- Vue.js 模板语法
本章节将详细介绍 Vue.js 模板语法,如果对 HTML +Css +JavaScript 有一定的了解,学习起来将信手拈来. Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 ...
- Vue.js 使用 Font Awesome 小图标
1.安装 Font Awesome npm i --save @fortawesome/fontawesome-svg-core npm i --save @fortawesome/free-soli ...
- webpack构建vue项目(配置篇)
最近公司要求用vue重构项目,还涉及到模块化开发,于是乎,我专门花了几天的时间研究了一下webpack这个目前来看比较热门的模块加载兼打包工具,发现上手并不是很容易,现将总结的一些有关配置的心得分享出 ...
- vue实现ajax滚动下拉加载,同时具有loading效果
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- vue渐变淡入淡出轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue简易轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- React和Vue的组件更新比较
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 24.0px "Helvetica Neue"; color: #404040 } p. ...
- vue webuploader 组件开发
最近项目中需要用到百度的webuploader大文件的分片上传,对接后端的fastdfs,于是着手写了这个文件上传的小插件,步骤很简单,但是其中猜到的坑也不少,详细如下: 一.封装组件 引入百度提供的 ...
随机推荐
- PAT基础6-5
6-5 求自定类型元素的最大值 (10 分) 本题要求实现一个函数,求N个集合元素S[]中的最大值,其中集合元素的类型为自定义的ElementType. 函数接口定义: ElementType Max ...
- java基础知识总结--继承和接口
什么是继承?什么是接口?他们之间的区别和联系是什么? 什么是继承? 继承是使用已存在的类的定义作为基础建立新类的技术,新类的定义可以增加新的数据或新的功能,也可以用父类的功能.多个类中存在相同属性和行 ...
- Centos7——NFS(Network File System)服务
NFS(Network File System)即网络文件系统,允许计算机之间通过网络共享资源:在NFS客户端即可NFS服务端所共享的目录挂载到本地,此时即可像读写本地目录一样读写远程计算机的目录与文 ...
- 【数位dp】Beautiful Numbers @2018acm上海大都会赛J
目录 Beautiful Numbers PROBLEM 题目描述 输入描述: 输出描述: 输入 输出 MEANING SOLUTION CODE Beautiful Numbers PROBLEM ...
- sqlserver数据库出现可疑错误修复方法
一.主数据库出现可疑修复方法: 第一种方法: 当数据库发生这种操作故障时,可以按如下操作步骤可处理此要领,打开数据库里的Sql查询编辑器窗口,运行以下的命令: ?修改数据库为紧急模式 ALTER DA ...
- matplotlib、PIL、cv2图像操作 && caffe / tensorflow 通道顺序
用python进行图像处理中分别用到过matplotlib.pyplot.PIL.cv2三种库,这三种库图像读取和保存方法各异,并且图像读取时顺序也有差异,如plt.imread和PIL.Image. ...
- UVA - 1456 Cellular Network
题目大意: 手机在蜂窝网络中的定位是一个基本问题.如果蜂窝网络已经得知手机处于c1, c2,-,cn这些区域中的一个.最简单的方法是同一时候在这些区域中寻找手机.但这样做非常浪费带宽. 因为蜂窝网络中 ...
- List集合序列排序的两种方法
首先讲一下Comparable接口和Comparator接口,以及他们之间的差异.有助于Collections.sort()方法的使用.请参考 1.Comparable自然规则排序//在自定义类Stu ...
- jvm理论-运行时数据区
三大流行jvm sun HotSpot ibm j9 BEA JRockit Oracle 会基于HotSpot整合 JRockit. jvm运行时数据区 java虚拟机所管理的内存将会包括以下几个运 ...
- react diff 原理
(1) 把树形结构按照层级分解,只比较同级元素.(2) 列表结构的每个单元添加唯一的 key 属性,方便比较.(3) React 只会匹配相同 class 的 component(这里面的 class ...