查看最新版的fontawesome 信息: https://github.com/FortAwesome/vue-fontawesome

搜索图标 :https://fontawesome.com/icons?d=gallery

安装:

//安装核心文件
$ cnpm i --save @fortawesome/fontawesome-svg-core
$ cnpm i --save @fortawesome/free-solid-svg-icons
$ cnpm i --save @fortawesome/vue-fontawesome //安装更多样式的图标文件,这里安装的是免费版的,收费版的到上面的地址查看 $ cnpm i --save @fortawesome/free-brands-svg-icons
$ cnpm i --save @fortawesome/free-regular-svg-icons

引入:

//main.js
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)

在页面组件中使用:

//icon里的就是图标的名字
<template>
<div id="app">
<font-awesome-icon icon="coffee" />
</div>
</template>

vue 安装 fontawesome的更多相关文章

  1. VUE.之安装 font-awesome

    VUE.之安装 font-awesome 我们在项目中经常使用各种图标:font-awesome (http://fontawesome.dashgame.com/) 1.npm 安装font-awe ...

  2. vue 使用font-awesome

    1.npm 安装font-awesome 以及需要的所有依赖 npm i --save @fortawesome/fontawesome-svg-core npm i --save @fortawes ...

  3. [Vue安装教程]十分钟学会vue 安装

    Vue的安装主要有一下几个步骤: 1.安装npm淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org 2.安装脚手架工 ...

  4. 前端笔记之Vue(一)初识SPA和Vue&webpack配置和vue安装&指令

    一.单页面应用(SPA) 1.1 C/S到B/S页面架构的转变 C/S:客户端/服务器(Client/Server)架构的软件. C/S 软件的特点: ① 从window桌面双击打开 ② 更新的时候会 ...

  5. vue安装搭建

    title: vue安装搭建 date: 2018-04-21 14:00:03 tags: [vue] --- 安装 首先安装nodejs 直接官网下载最新版本http://nodejs.cn/do ...

  6. vue安装及环境搭建

    vue项目在pycharm里运行需要安装一个插件,打开settings,找到plugins,里面搜索vue.js,点击安装. vue安装 先安装node.js npm install -g @vue/ ...

  7. Vue系列(2):Vue 安装

    前言:关于页面上的知识点,如有侵权,请看 这里 . 关键词:小白.Vue 安装.Vue目录结构.Vue 构建页面流程 ? 初学者安装 vue 用什么好 大家都知道,学 Vue 最好还是去官网学,官网写 ...

  8. vue 安装与起步

    vue安装: 1.官网下载vue,在script标签里引用(去下载) 2.使用CDN(建议下载到本地,不推荐这种方法): BootCDN:https://cdn.bootcss.com/vue/2.2 ...

  9. Vue安装及插件Vue Devtools

    vue安装: # 最新稳定版 $ npm install vue # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新 ...

随机推荐

  1. 锋利的Jquery(点击显示隐藏div)

    点击显示隐藏div <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  2. [NOIP2019模拟赛]夹缝

    夹缝 问题描述: 二维空间内有两面相对放置的,向无限远延伸的镜子,以镜子的方向及其法向量建立坐标系,我们选定一个法向量方向下面称“上”.在镜子上的整数位置,存在着一些传感器,传感器不影响光线的反射,光 ...

  3. Luogu P1039 侦探推理(模拟+枚举)

    P1039 侦探推理 题意 题目描述 明明同学最近迷上了侦探漫画<柯南>并沉醉于推理游戏之中,于是他召集了一群同学玩推理游戏.游戏的内容是这样的,明明的同学们先商量好由其中的一个人充当罪犯 ...

  4. [Vue warn]: Failed to mount component: template or render function not defined. 错误解决方法

    解决方法import Vue from "vue"; 默认引入的文件是 vue/dist/vue.runtime.common.js.这个可以在node_modules/vue/p ...

  5. node中没有全局作用域,只有模块作用域(文件作用域)

    node中没有全局作用域,只有模块作用域(文件作用域)

  6. 【JZOJ3400】旅行

    description 从前有一位旅者,他想要游遍天下所有的景点.这一天他来到了一个神奇的王国:在这片土地上,有n个城市,从1到n进行编号.王国中有m条道路,第i条道路连接着两个城市ai,bi,由于年 ...

  7. LUOGU P2831 愤怒的小鸟 (NOIP 2016)

    题面 题解 好像昨天wxl大爷讲的是O(Tn*2^n)的做法,后来没想通,就自己写了个O(Tn^2*2^n)的暴力状压, 莫名其妙过了??数量级二十亿??懵逼,可能到了CCF老爷机上就T了.dp[S] ...

  8. JavaSE_12_Properties类和缓冲流

    1.Properties类 java.util.Properties 继承于Hashtable ,来表示一个持久的属性集.它使用键值结构存储数据,每个键及其对应值都是一个字符串.该类也被许多Java类 ...

  9. 移动端开发框架Zepto.js

    一.概述 Zepto.js是一个轻量的js库,它与jQuery有类似的API. zepto的设计目的是不到10K的通用库,快速下载,有一个熟悉的api-->精力专注在开发上. 流行起来的原因:轻 ...

  10. OCCT 7.4.0 beta version is available

    OpenCASCADE 7.4.0测试版本发布 OCC在9月16号发布了opencascade740 beta测试版本,新版本里面做了如下一些重点修改如下: 造型算法部分主要对网格化算法BRepMes ...