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,于是着手写了这个文件上传的小插件,步骤很简单,但是其中猜到的坑也不少,详细如下: 一.封装组件 引入百度提供的 ...
随机推荐
- firefox镜像 和geckodriver驱动大全
最近学习Selenium,下载资源很难,还好找到了一个网站,转载的https://blog.csdn.net/cyjs1988/article/details/73039423,收下了,以便以后学习使 ...
- db2报错 Operation not allowed for reason
1.DB2数据库表操作错误SQL0668N Operation not allowed for reason code "1" on table "XXXX". ...
- 使用 OpenSessionInViewFilter 配置加载
1.使用 OpenSessionInViewFilter
- JAVA自学笔记03
1.三目运算符 1)格式:(关系表达式)?表达式1:表达式2 true则执行表达式1,false则执行表达式2 @ 例题1 :求两数中的较大值 System.out.println(x>y?x: ...
- 使用cefsharp 浏览器放大
(1)如果浏览器位置有问题,需要设置 Cef.EnableHighDPISupport(); (2)如果要放大浏览器,需要设置 browser.SetZoomLevel(1.25); Chromiu ...
- Java通过SMS短信平台实现发短信功能
在项目中使用过发短信的功能,但那个由于公司内部的限制很麻烦,今天在网上找到一个简单的,闲来无事就把它记录如下: 本程序是通过使用中国网建提供的SMS短信平台实现的(该平台目前为注册用户提供5条免费短信 ...
- [Python设计模式] 第25章 联合国维护世界和平——中介者模式
github地址:https://github.com/cheesezh/python_design_patterns 题目背景 联合国在世界上就是中介者的角色,各国之间的关系复杂,类似不同的对象和对 ...
- 终端下将 man 命令的结果输出到文件保存
终端下将 man 命令的结果输出到文件保存 在linux或mac下,当我们使用man命令查看某一个命令的详细帮助说明信息时: 可能终端的显示效果不是那么方便: 那么我们可以将man命令的结果输出到tx ...
- 安装了 R2 Integration Servic 之后,SQL Server 2008 Management Studio报错
问题产生 IM数据库服务器未安装Integration Servic,影响备份.在安装了安装了 SQL Server 2008 R2 Integration Servic 之后,SQL Server ...
- AYUI -AYUI风格的 超美 百度网盘8.0
2017-03-23 19:18:43 (截止到2017-3-23 20:20:33开发结束)体验地址: http://pan.baidu.com/s/1bX28H4 新增传输列表 ======== ...