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. Kafka监控框架介绍

    前段时间在想Kafka怎么监控.怎么知道生产的消息或消费的消费是否有丢失,目前有几个开源的Kafka监控框架这里整理了下,不过这几个框架都有各自的问题侧重点不一样: 1.Kafka Monitor 2 ...

  2. 轻量对象存储服务——minio

    minio Minio是一个非常轻量的对象存储服务. Github: minio 它本身不支持文件的版本管理.如果有这个需求,可以用 s3git 搭配使用. Github: s3git 安装 mini ...

  3. C# 发送消息SendKeys、SendMessage、keybd_event的用法

    一.C#中SendKeys的用法 功能:将一个或多个按键消息发送到活动窗口,就如同在键盘上进行输入一样. 语法: SendKeys.Send(string keys); SendKeys.SendWa ...

  4. [asp.net core]The requested page cannot be accessed because the related configuration data for the page is invalid.

    bug HTTP Error 500.19 - Internal Server Error The requested page cannot be accessed because the rela ...

  5. centos7证书安全登录

    生成一对密钥,本地私钥匹配线上主机的公钥进行登录,比密码登录更加安全方便. 本文适用MAC/Linux的本地环境 1.本地生成一对密钥 ssh-keygen -t rsa 2.把生成的公钥上传到线上主 ...

  6. Cocos Creator学习笔记

    1.动态加载图片 cc.Class({ extends: cc.Component, properties: { label: { default: null, type: cc.Label }, l ...

  7. java使用httpclient封装post请求和get的请求

    在我们程序员生涯中,经常要复用代码,所以我们应该养成时常整理代码的好习惯,以下是我之前封装的httpclient的post和get请求所用的代码: package com.marco.common; ...

  8. 搜索历史命令 Ctrl + R ( ctrl + r to search the history command )

    Linux下的神器 ctrl + r (reverse-i-search ) 的使用方法:   (reverse-i-search usage: ) (press ctl + r ) 输入任意字符,例 ...

  9. Redis简单示例

    1.Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的API. 从2010年3月15日起,Redis的开发工作由VMwa ...

  10. Swift实时画箭头的实现

    iOS上实现画箭头,如果是指定了坐标点,那是很简单的,但如果需要做到实时绘制,就需要计算一下了 需求: 在白板上,根据手势落下点和移动点,实时绘制一条箭头直线(如下图) 实现代码: /// 获取箭头的 ...