官网: 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. Jupyter Notebook入门指南

    作者:京东科技隐私计算产品部 孙晓军 1. Jupyter Notebook介绍 图1 Jupter项目整体架构 [https://docs.jupyter.org/en/latest/project ...

  2. 一文搞定Spring Task

    今天和大家分享下Spring Task这个知识点,主要通过下面6个点来展开描述,希望能够帮助到大家. 1.什么是定时任务 2.入门案例 3.Corn表达式 4.Corn实战案例 5.@Schedule ...

  3. python之路41 前端页面尝试 丑出新高度

    边框 p {/* 左边 */ font-size: 48px; border-left-width: 5px; border-left-style: dotted; /*点点边框*/ border-l ...

  4. P8775 [蓝桥杯 2022 省 A] 青蛙过河

    简要题意 有一只青蛙在 \(1\) 处,有一些石头,位于 \(2,3,4,\cdots n\),它们的高度是 \(H_2,H_3,\cdots,H_n\).青蛙每落一次石头,该石头的高度就会 \(-1 ...

  5. JavaScript 中 this 关键字的作用和如何改变其上下文

    一.this 关键字的作用 JavaScript 中的 this 关键字引用了所在函数正在被调用时的对象.在不同的上下文中,this 的指向会发生变化. 在全局上下文中,this 指向全局对象(在浏览 ...

  6. 使用SQL获取当前周别,oracle日期处理

    使用SQL获取当前周别 select to_char(sysdate,'yyyyww') from dual  select to_char(to_date('20200611','yyyymmdd' ...

  7. mongdb遭遇勒索,用备份进行数据恢复

    mongdb遭遇勒索,用备份进行数据恢复 1.背景: 某台MongoDB服务器,没有配置用户名密码,放到公网不到一天,遭到删库勒索 All your data is a backed up. You ...

  8. 时间日期相关总结-System类的常用方法

    时间日期相关总结 Date类 A.构造方法 Date();根据当前系统时间创建日期对象 Date(long time);根据传入的毫秒值时间创建日期对象 B.成员方法 long getTime(); ...

  9. .Net7运行模型之托管Main函数的调用

    前言: .Net7的CLR最具特色的一个地方,就是运行模型.因为它主宰了整个CLR的运行过程. 又因为其庞大的代码量,有的几十万行甚至百万行.所以理解起来非常不容易.本篇拆分来看下,里面一个细节Mai ...

  10. DNA

    思路一: 这题需要桶+哈希(简化版像A 1  B  2 ......) 具体: 先把数据输入 再枚举可能的右端点,再由右端点得到左端点(l和r相差k) 在 l到r 区间内将这一段区间哈希成一个4进制数 ...