官网: https://fontawesome.com/

1.安装

`` `powershell

npm i --save @fortawesome/fontawesome-svg-core


Using Vue 2.x
```powershell
$ npm i --save @fortawesome/vue-fontawesome@latest

Using Vue 3.x

npm i --save @fortawesome/vue-fontawesome@prerelease
  1. 安装 svg-icons
npm i --save @fortawesome/free-regular-svg-icons
npm i --save @fortawesome/free-solid-svg-icons
  1. 引入icon
import { library } from '@fortawesome/fontawesome-svg-core'
// 引入所有图标
import * as faIcons from '@fortawesome/free-solid-svg-icons'
// 引入FontAwesomeIcon组件
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
Vue.component('font-awesome-icon', FontAwesomeIcon)
let iconMap = new Map()
// 这里由于图标有重复的,直接全部引入会报错
for (let [key, value] of Object.entries(faIcons)) {
if (!iconMap.get(value.iconName))
library.add(value)
iconMap.set(value.iconName, value)
}
  1. 使用
<template>
<div id="app">
<font-awesome-icon icon="user-secret" />
</div>
</template>

原文链接: https://www.cnblogs.com/guangzan/p/14693444.html

vue2 项目引入Fontawesome的更多相关文章

  1. vue2.0 引入font-awesome

    网上的大部分教程复杂而且难看懂,其实两步就能搞定. 先cnpm install font-awesome --save引入依赖 然后在main.js引入 font-awesome/css/font-a ...

  2. VUE2 项目 引入 leaflet.draw全过程

    leaflet.draw的参考文档:http://leaflet.github.io/Leaflet.draw/docs/leaflet-draw-latest.html   这个网址不稳定,多刷新几 ...

  3. vue学习笔记(三)- vue2.x引入Element-ui

    webpack+vue2.x+element-ui 作者:狐狸家的鱼 本文链接:vue2.x引入Element-ui GitHub:sueRimn 1.新建项目 vue init webpack vu ...

  4. 解决在html中引入font-awesome的css文件后, 图标显示不出来

    今天小颖在做项目时,需要在html文件中引入font-awesome.min.css,但是引入后: 以前小颖在用font-awesome库里的图标时,都是直接从node中下包,然后在main.js中引 ...

  5. vue2项目中引用外部js文件

    vue2项目目录如下(utils文件夹是自己手工建的,然后在utils里新建js文件): 使用import导入文件时,注意路径,路径不对会报错: 导入之后使用外部js函数时,直接写导入时的名字加小括号 ...

  6. vue2.x引入threejs

    @ 目录 vue2.x引入threejs npm安装 使用指定版本: 其他插件 实例 强调 vue2.x引入threejs npm安装 npm install three 使用指定版本: npm in ...

  7. 新项目引入gulp

    1:安装npm:官网下载nodejs--https://nodejs.org/en/.进行安装npm;--http://jingyan.baidu.com/article/a17d528506d7f5 ...

  8. Xcode旧项目引入CocoaPod遇到的问题与解决

    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...

  9. Android:认识R类、findViewById方法查找组件、@string查找字符、@color查找颜色、@drawable查找图片、@dimen某个组件尺寸定义、项目引入资源国际化

    导入 之前都是断断续续的看了一些于如何使用android开发的文章.资料等,到目前位置很多基础的东西都不清楚,于是去学习了别人的课程,才了认识了R类.findViewById方法查找组件.项目引入资源 ...

  10. Flutter 即学即用系列博客——03 在旧有项目引入 Flutter

    前言 其实如果打算在实际项目中引入 Flutter,完全将旧有项目改造成纯 Flutter 项目的可能性比较小,更多的是在旧有项目引入 Flutter. 因此本篇我们就说一说如何在旧有项目引入 Flu ...

随机推荐

  1. Java基础篇——JUC初步

    1.基础知识 java默认的两个线程:Main线程+GC守护线程 java并不能开启线程,需要调用底层用c语言写的本地方法 wait和sleep的区别: wait方法会释放线程锁,并且只能在同步代码块 ...

  2. [数据结构]普里姆(Prim)算法生成最小生成树

    前提介绍:最小生成树概念 一个连通图的生成树是图的极小连通子图,它包含图中的所有定点,并且只含尽可能少的边,这意味着对于生成树来说,就砍去使生成树变成非连通图:若给它怎家一条边就会形成图中的一条回路. ...

  3. 【Vue3.0】关于 script setup 语法糖的用法

    script setup - 简介 先来看一看官网关于 <script setup> 的介绍: 要彻底的了解 setup 语法糖,你必须先明确 setup() 这个 组合式API 官网中对 ...

  4. 题解P3847 [TJOI2007]调整队形

    简要题意 给出一个长度为 \(n\) 的序列 \(A\),你需要执行下面的操作,将这个序列变成回文序列: 在序列左右侧或中间插入一个元素,元素数值任意. 删除一个元素. 更改一个元素的值. \(1 \ ...

  5. 线性构造treap

    数据结构 线性构造treap treap的线性构造可以使复杂度锐减到\(O(n)\),很优秀 treap的本质就是小根堆+二叉搜索树,即保证val满足搜索树的同时,维护rad的小根堆. 现在我们先把数 ...

  6. 探究BrainSplit-集群脑裂

    本篇文章将会以redis集群为例,分享在主从集群中会导致数据丢失的一个问题:BrainSplit-集群脑裂 1.什么是集群脑裂 所谓的脑裂,就是指在主从集群中,同时有两个主节点,它们都能接收写请求.而 ...

  7. java入门与进阶-P1.5+P1.6

    输入 Scanner输入语句介绍 java.util.Scanner 是 Java5 的新特征,我们可以通过 Scanner 类来获取用户的输入. 下面是创建 Scanner 对象的基本语法: Sca ...

  8. java入门与进阶 P-3.2+P-3.3+P3.4

    数数字 例如:Scanner sc = new Scanner(System.in);int number = sc.nextInt();int count= 0;while(number>0) ...

  9. Rigol DSA815频谱仪在合肥光源工作点测量系统中的应用

    发的这篇文,我只是搬运工,读者切记. 合肥光源工作点测量系统已实现BBQ无激励在线测量,还是前些年永良师弟在这的时候调试成功的,并和超才把安捷伦的一台频谱仪和普源的DSA815的IOC调试成功,不过在 ...

  10. C++梳理

    1.基础篇 1.C++ 中的四种智能指针 为什么要使⽤智能指针:智能指针其作⽤是管理⼀个指针,避免程序员申请的空间在函数结束时忘记释放,造成内存泄漏这种情况的发⽣.使⽤智能指针可以很⼤程度上的避免这个 ...