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,于是着手写了这个文件上传的小插件,步骤很简单,但是其中猜到的坑也不少,详细如下: 一.封装组件 引入百度提供的 ...
随机推荐
- Java面试题集锦
1. String.StringBuffer和StringBuilder的区别. (1) String:存储数值不可改变的字符串 (2) StringBuffer:可变字符序列.线程安全.效率低 ...
- 和textrank4ZH代码一模一样的算法详细解读
前不久做了有关自动文摘的学习,采用方法是TextRank算法,整理和大家分享. 一. 关于自动文摘 利用计算机将大量的文本进行处理,产生简洁.精炼内容的过程就是文本摘要,人们可通过阅读摘要来把握文本主 ...
- 【搜索】传感器 @upcexam6023
时间限制: 1 Sec 内存限制: 128 MB 题目描述 SR最近新买了一款电子桌游 这个玩具内部是M个围成一圈的传感器.每个传感器都有开和关两种工作状态,分别用1和0表示.显然,从不同的位置触发沿 ...
- javaScript系列 [01]-javaScript函数基础
[01]-javaScript函数基础 1.1 函数的创建和结构 函数的定义:函数是JavaScript的基础模块单元,包含一组语句,用于代码复用.信息隐蔽和组合调用. 函数的创建:在javaScri ...
- SharePoint PowerShell 修改母版页
前言 最近在群里帮忙回答问题,碰到这么一个尴尬的问题,有人创建了一个新母版页,然后引用了新的母版页,不知道怎么的母版页有问题了,再也进不去站点了,希望修改回旧的母版页. 看到问题,想了一下,其实两种方 ...
- Android的Databinding-RecyleView绑定
public class UserAdapter extends RecyclerView.Adapter<UserAdapter.UserHolder> { private static ...
- webpack Import 动态文件
其实React Import scss 是非常简单的,比如一般写法import './PromotionPage.scss';,今天遇到一个样式需要覆盖,那么修改后的代码变成了: import './ ...
- 通过Comparable来实现对自身的比较
import org.apache.commons.lang.builder.CompareToBuilder; import org.apache.commons.lang.builder.Equa ...
- 设计模式之二十一:中介者模式(Mediator)
中介者模式:定义了一个对象.用来封装一系列对象的交互.中介者模式通过使对象之间不必显式引用减少了对象之间的耦合,而且同意你独立改变它们之间的交互. 中介者模式就是将对象之间的交互封装在了一个独立的对象 ...
- JQuery : 插件定义
来源:http://www.cnblogs.com/xcj26/p/3345556.html 一:导言 有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写("#"), ...