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. c c++ #define 定义假函数

    #define   Add(a,b)   ((a)+(b)) #define Max(a,b) ((a)>(b)?(a):(b)) 这就定义了一个假的函数 说白了就是字符串替换 这样在写代码时能 ...

  2. 用node搭建本地服务环境

    const express = require('express'); const path = require('path'); const request = require('request') ...

  3. hihocoder1051 补提交卡(贪心)

    http://hihocoder.com/problemset/problem/1051 一开始dfs暴搜超时 这题关键在于理解到,肯定是补连续的几天.所以说写贪心之前要好好想想,怎么贪. //补题卡 ...

  4. ACM-ICPC 2018 南京赛区网络预赛 E题

    ACM-ICPC 2018 南京赛区网络预赛 E题 题目链接: https://nanti.jisuanke.com/t/30994 Dlsj is competing in a contest wi ...

  5. delphi TTBXToolBar 增加外部控件

    这样可以引用外部控件,还是比较方便

  6. javaScript系列 [01]-javaScript函数基础

    [01]-javaScript函数基础 1.1 函数的创建和结构 函数的定义:函数是JavaScript的基础模块单元,包含一组语句,用于代码复用.信息隐蔽和组合调用. 函数的创建:在javaScri ...

  7. Exception in thread "main" java.lang.StackOverflowError at java.util.ArrayList$SubList.rangeCheckForAdd(Unknown Source)

    Exception in thread "main" java.lang.StackOverflowError at java.util.ArrayList$SubList.ran ...

  8. Kworkerd恶意挖矿分析

    转自:https://www.360zhijia.com/anquan/417114.html 0x01 快速特征排查 TOP显示CPU占用高,但是没有高占用的进程 存在与未知服务器13531端口建立 ...

  9. MAC终端密钥登录自动输入密码

    升级MAC系统后,发现用于MAC终端ssh服务器的登录脚本无法正常执行了,表现为:需要手动输入密钥密码,于是重新整理一下,恢复正常,在此记录一下: #!/usr/bin/expect -fspawn ...

  10. ElasticSearch的基本原理与用法

    一.简介 ElasticSearch和Solr都是基于Lucene的搜索引擎,不过ElasticSearch天生支持分布式,而Solr是4.0版本后的SolrCloud才是分布式版本,Solr的分布式 ...