查看最新版的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. node vue 微信公众号(四)配置环境 本地测试

    1.去natap 配置端口号 //本地项目是8080端口,natapp就配置8080端口 2.ngrok配合vue-cli实现外网访问 1.去 https://ngrok.com/download 下 ...

  2. LUOGU P3382 【模板】三分法 (三分)

    传送门 解题思路 三分,填坑.每次取l与r的中间值mid,然后向左移一点点,向右移一点点进行判断,判断时用秦九韶算法即可. #include<iostream> #include<c ...

  3. centos 6.5 安装dotnet core 2.2

    .net core 官网地址 https://dotnet.microsoft.com/download 本次安装版本为.net core SDK v2.2.101 1.查看系统版本, 升级系统基本l ...

  4. PAT甲级——A1095 Cars on Campus

    Zhejiang University has 8 campuses and a lot of gates. From each gate we can collect the in/out time ...

  5. idea怎么打war包

    1.上方导航栏粥找到 Buid——> Bild Artifacts... 2.弹出框中选择 3.war包打好啦,一般放在编译的 target目录下

  6. 在scrapy中过滤重复的数据

    当为了确保爬到的数据中没有重复的数据的时候,可以实现一个去重的item pipeline 增加构造器方法,在其中初始化用于对与书名的去重的集合 在process_item方法中,先取出item中要判断 ...

  7. 04-6-queryselect

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

  8. js (function(){}()),(function(){})(),$(function(){});之间的区别

    参考:https://blog.csdn.net/stpice/article/details/80586444 (function(){}()), (function(){})() 均为立即执行函数 ...

  9. line-height影响排版

    父级div设置了line-height值,子级div会继承line-height.如果不想子级元素继承,给子级元素设置line-height:normal.

  10. redis String 命令

    今天在虚拟机的Ubuntu上装了一个redis,学习redis的一些基本东西,在数据类型的时候,看到redis的,String,hash,set list zset,对String的setbit命令一 ...