官网: 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. 旧酒换新瓶,新版M1/M2芯片Macos(Ventura)安装古早版本Python2.7(Python2.x)

    向下兼容特性是软件开发系统的一个重要指标,它是指一个新的系统或者软件能够与旧的系统或软件兼容并正常运行.这意味着旧系统或软件可以在新系统或软件中使用,而不会出现问题.向下兼容对于提高软件或系统的可用性 ...

  2. Python自动化操作sqlite数据库

    你好,我是悦创. 原文首发:https://bornforthis.cn/column/pyauto/ 1. 什么是数据库 数据库是"按照数据结构来组织.存储和管理数据的仓库",是 ...

  3. vue多界面开发

    1. 安装 vue-cli,已有的请跳过这一步 npm install -g @vue/cli 若已安装旧版 vue-cli 则需要先卸载 vue-cli npm uninstall -g vue-c ...

  4. PowerUsageSummary.java源码分析

    在在线网站http://androidxref.com/上对Android版本6.0.1_r10源码进行分析 官方手机的应用耗电排行具体实现位置在:/packages/apps/Settings/sr ...

  5. element上传图片组件使用方法|图片回显|格式转换base64

    upload上传组件的使用方法 上传图片后自动上传(也可以手动上传),图片上传成功后由后端返回特定图片地址,在表单提交后将表单数据同图片地址一并返回即可完成图片上传功能. 组件HTML <!-- ...

  6. 为什么要虚拟化,为什么要容器,为什么要Docker,为什么要K8S?

    前言 如标题中的问题所提到的虚拟化,容器,Docker和K8s那样,我们不妨这样问:这些技术到底适用于哪些场景,有没有别的技术可以替代?这些技术的优劣在哪里? 下面我将针对性地从以上几个问题的出发点, ...

  7. 大数据实时多维OLAP分析数据库Apache Druid入门分享-上

    @ 目录 概述 定义 MPP和Lambda补充说明 概述 特征 适用场景 不适用场景 横向对比 部署 单机部署 入门示例 概述 定义 Apache Druid 官网地址 https://druid.a ...

  8. HelloWorld程序的代码编写-Hello World的编译运行

    HelloWorld程序的代码编写 程序开发步骤说明 开发环境已经搭建完毕,可以开发我们第一个Java程序了. Java程序开发三步骤:编写.编译.运行. 编写Java源程序 1. 在 d:\day0 ...

  9. Linux音频采集和在国产化平台中遇到的坑(二)

    Linux音频采集和在国产化平台中遇到的坑(二) ALSA采集这条路走不通,只能尝试其他途径,这里通过PulseAudio的接口成功实现了采集麦克风和系统声音的功能. linux PulseAudio ...

  10. BST 插入节点传新版本(原痛恨JavaScript每一天 __ 没有指针)

    2023年2月2日更新 perform代码上传到GitHub了,新方法比老方法慢,不建议在生产环境使用 GitHub地址:https://github.com/Dou-fugan/webDemo/tr ...