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,于是着手写了这个文件上传的小插件,步骤很简单,但是其中猜到的坑也不少,详细如下: 一.封装组件 引入百度提供的 ...
随机推荐
- css3 学习 重点 常用
1 -webkit- -moz- -o-浏览器兼容 2 box-sizing:border-box; 两个近乎一样的div一样的样式 平分一个div 定义:属性允许您以确切的方式定义适 ...
- python之函数联系
----------------------作业一 # 有两个列表,分别存放来老男孩报名学习linux和python课程的学生名字# linux=['钢弹','小壁虎','小虎比','alex','w ...
- CSS_级联和继承
2016-11-06 <CSS入门经典>第七章 1.在HTML中使用CSS样式表的三种方式: (1)内联的样式表. eg:<em style="background-whi ...
- 【树形dp入门】没有上司的舞会 @洛谷P1352
传送门 题目描述 某大学有N个职员,编号为1~N.他们之间有从属关系,也就是说他们的关系就像一棵以校长为根的树,父结点就是子结点的直接上司.现在有个周年庆宴会,宴会每邀请来一个职员都会增加一定的快乐指 ...
- 问题7:JavaScript 常用正则示例
1. trim功能(清除字符串两端空格) String.prototype.trim = function() { return this.replace(/(^\s+)|(\s+$)/g, ''); ...
- springmvc中select可以绑定enum中所有数据的方法
public enum States { AK("AK"), AL("AL"), AR("AR"), AZ("AZ"), ...
- ionic 视图滚动到顶部
问题描述 进入页面, 滚动到底部 点击一个连接, 当前视图内容更新了 内容滚动到了上次的位置导致底部的内容没显示 需要控制自动回滚到顶部 <ion-content delegate-handle ...
- C#/.NET基础视频[2018年][195集完]
B站观看地址-无广告观看 https://www.bilibili.com/video/av21896829/ 前一两集 声音有点大 ,可以调大一点音量. 百度网盘下载地址 https://pan.b ...
- 面试汇总——说一下CSS盒模型
本文是面试汇总分支——说一下CSS盒模型. 基本概念:W3C标准盒模型和IE盒模型 CSS如何设置这两种模型 JS如何获取盒模型对应的宽和高 根据盒模型解释边距重叠 BFC(边距重叠解决方案) 一. ...
- MySQL技术内幕读书笔记(七)——锁
锁 锁是数据库系统区分与文件系统的一个关键特性.为了保证数据一致性,必须有锁的介入.数据库系统使用锁是为了支持对共享资源进行并发访问,提供数据的完整性和一致性. lock与latch 使用命令 ...