查看最新版的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. Nand flash 芯片工作原理

    Nand flash 芯片型号为 Samsung K9F1208U0B,数据存储容量为 64MB,采用块页式存储管理.8 个 I/O 引脚充当数据.地址.命令的复用端口. 芯片内部存储布局及存储操作特 ...

  2. EasyNetQ异常处理

    代码下载 https://download.csdn.net/download/u010312811/11252093 官方Demo https://github.com/EasyNetQ/EasyN ...

  3. Luogu P2079 烛光晚餐(背包)

    P2079 烛光晚餐 题意 题目背景 小明准备请小红去一家咖啡厅,共进烛光晚餐.小红高兴地和他一起去了咖啡厅. 题目描述 小红说:"小明,你点菜吧."小明看到菜单上有\(N\)道菜 ...

  4. 安卓中 使用html来使文字变色Html.fromHtml

    在这里  我是用的html使文字的个别颜色变红 String textStr = " 本课程为<font color=\"#FF0000\">" + ...

  5. 二分图匹配——poj1469

    关于本题二分图的匹配关系始终是加单向边用左边去匹配右边,match表示的是右边的人匹配的对应的左边的点 /* 关于本题二分图的匹配 链接的关系始终是单向边 用左边去匹配右边,match表示的是右边的人 ...

  6. 菜鸟nginx源码剖析数据结构篇(三) 单向链表 ngx_list_t[转]

    菜鸟nginx源码剖析数据结构篇(三) 单向链表 ngx_list_t Author:Echo Chen(陈斌) Email:chenb19870707@gmail.com Blog:Blog.csd ...

  7. 利用R语言制作出漂亮的交互数据可视化

    利用R语言制作出漂亮的交互数据可视化 利用R语言也可以制作出漂亮的交互数据可视化,下面和大家分享一些常用的交互可视化的R包. rCharts包 说起R语言的交互包,第一个想到的应该就是rCharts包 ...

  8. PAT甲级——A1068 Find More Coins

    Eva loves to collect coins from all over the universe, including some other planets like Mars. One d ...

  9. AppScan的基础使用

    AppScan是用于Web项目的安全测试工具,扫描网站所有url,自动测试是否存在各种类型的漏洞.AppScan安装在Windows环境上,版本越高,规则库越安全,扫描越全面.   1. 打开AppS ...

  10. iotop实时监控磁盘io

    介绍 Linux下的IO统计工具如iostat, nmon等大多数是只能统计到per设备的读写情况, 如果你想知道每个进程是如何使用IO的就比较麻烦. iotop 是一个用来监视磁盘 I/O 使用状况 ...