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的更多相关文章

  1. 关于vue项目font字体图标库导入未显示的问题

    运行项目时,弹出以下信息:

  2. vue的基本指令

      1.创建vue对象 <script src="vue.js"></script> var vm = new Vue({     el:"#ap ...

  3. Vue.js 模板语法

    本章节将详细介绍 Vue.js 模板语法,如果对 HTML +Css +JavaScript 有一定的了解,学习起来将信手拈来. Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 ...

  4. Vue.js 使用 Font Awesome 小图标

    1.安装 Font Awesome npm i --save @fortawesome/fontawesome-svg-core npm i --save @fortawesome/free-soli ...

  5. webpack构建vue项目(配置篇)

    最近公司要求用vue重构项目,还涉及到模块化开发,于是乎,我专门花了几天的时间研究了一下webpack这个目前来看比较热门的模块加载兼打包工具,发现上手并不是很容易,现将总结的一些有关配置的心得分享出 ...

  6. vue实现ajax滚动下拉加载,同时具有loading效果

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  7. vue渐变淡入淡出轮播图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. vue简易轮播图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. React和Vue的组件更新比较

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 24.0px "Helvetica Neue"; color: #404040 } p. ...

  10. vue webuploader 组件开发

    最近项目中需要用到百度的webuploader大文件的分片上传,对接后端的fastdfs,于是着手写了这个文件上传的小插件,步骤很简单,但是其中猜到的坑也不少,详细如下: 一.封装组件 引入百度提供的 ...

随机推荐

  1. Python下载及Python最强大IDEPyCharm下载链接

    Python下载: https://www.python.org/downloads/ PyCharm下载: https://www.jetbrains.com/pycharm/download/#s ...

  2. Linux之nginx反向代理三台web

    作业三:nginx反向代理三台web 实现基于轮询的方式调度三台web,并验证结果 实现基于权重的方式调度三台web,并验证结果 实现基于hash的方式调用三台web,并验证结果 [root@loca ...

  3. Tornado-cookie

    cookie 服务端在客户端的中写一个字符串,下一次客户端再访问时只要携带该字符串,就认为其是合法用户. tornado中的cookie有两种,一种是未加密的,一种是加密的,并且可以配置生效域名.路径 ...

  4. 1.3 java8新特性总结

    java8中重要的4个新特性: Lambda Stream Optional 日期时间API 接口方法(default和static方法,jdk9可定义private方法) 一.Lambda impo ...

  5. C# CountdownEvent实现

    关于CountdownEvent网上的介绍比较少,因为它是实现和使用都很简单,先看看网上的一些评论吧: CountDownEvent调用成员函数Wait()将阻塞,直至成员函数Signal() 被调用 ...

  6. shell编程学习笔记(四):Shell中转义字符的输出

    通过echo可以输出字符串,下面看一下怎么输出特殊转义字符,首先我先列出来echo的转义字符: \\ 输入\ \a 输出警告音 \b 退格,即向左删除一个字符 \c 取消输出行末的换行符,和-n选项一 ...

  7. Docker中部署Mysql5.7和DbAdmin的docker-compose.yml

    一.简述 本文讲Docker通过docker-compose.yml部署Mysql5.7和dbAdmin的方法. 二.文件 1.docker-compose.yml内容如下: version: ' s ...

  8. TensorFlow实战Google深度学习框架8-9章学习笔记

    目录 第8章 循环神经网络 第9章 自然语言处理 第8章 循环神经网络 循环神经网络的主要用途是处理和预测序列数据.循环神经网络的来源就是为了刻画一个序列当前的输出与之前信息的关系.也就是说,循环神经 ...

  9. html5学习笔记——基础

    一:Canvas <canvas> 标签只是图形容器,图形的绘制需要用JS来定义. 1:绘制与填充 stroke():绘制,空心. fillXX():填充,实心. 2:绘制线条 var c ...

  10. java生成32的md5签名串

    import java.security.MessageDigest; import lombok.extern.slf4j.Slf4j; /** * 签名帮助类 * * @author yangzl ...