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,于是着手写了这个文件上传的小插件,步骤很简单,但是其中猜到的坑也不少,详细如下: 一.封装组件 引入百度提供的 ...
随机推荐
- 201771010134杨其菊《面向对象程序设计java》第八周学习总结
第八周学习总结 第一部分:理论知识 一.接口.lambda和内部类: Comparator与comparable接口: 1.comparable接口的方法是compareTo,只有一个参数:comp ...
- Vmware下mint os的安装
在vmware 11中,mint倒是很好安装.直接读取iso文件,会自动进入一个类似WindowsPE的安装系统,直接双击开始安装就好,比较傻瓜化. 但是安装好了,字体太小,看着很不舒服,于是就倒腾V ...
- 更好用的excel国际化多语言导出
不知道大家在开发中有没有遇到过『excel导出』的需求,反正我最近写了不少这种功能,刚开始利用poi,一行行的手动塞数据,生成excel,而且还有国际化需求,比如:标题栏有一列,用户切换成" ...
- Google C++ 单元测试 GTest
from : http://www.cnblogs.com/jycboy/p/6057677.html 一.设置一个新的测试项目 在用google test写测试项目之前,需要先编译gtest到lib ...
- CSS中margin边界叠加问题及解决方案
你对CSS的margin边界叠加的概念是否了解,这里和大家分享一下,当一个元素出现在另一个元素上面时,第一个元素的底边界与第二个元素的顶边界发生叠加. CSS的margin边界叠加深度剖析 边界叠加简 ...
- [Web 前端] mobx教程(五)-Mobx常见问题及解决方案(1)Mobx使用严格模式
copy from : https://blog.csdn.net/smk108/article/details/83185745 mobx在严格模式下,不允许在 action 外更改任何状态.但是不 ...
- netty中的ChannelHandler和ChannelPipeline
netty中的ChannelHandler和ChannelPipeline ChannelHandler 家族 https://www.w3cschool.cn/essential_netty_in_ ...
- MFC更换窗口图标
https://blog.csdn.net/deep_kang/article/details/72722692: MFC更换图标,图像默认为MFC,主要步骤有三步. 第一步 找到一张图片(坑点: ...
- VS插件File Nesting
开发者们一直以来都是使用Visual Studio的解决方案管理器 中的嵌套功能管理项目的子文件夹,使得文件组织清晰.便于访问.鉴于现在的项目巨大的文件数目,如果能将这种嵌入能力应用于项目的其他子项上 ...
- 单片机成长之路(51基础篇) - 008 C51 的标示符和关键字
标准 C 语言定义了 32 个关键字,如下表(ANSI C的32个关键字): C51在此基础上针对单片机功能进行了扩展,详情见下表(C51编译器扩充关键字): C 51的数据类型 51单片机使用的C语 ...