vue2 项目引入Fontawesome
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
- 安装 svg-icons
npm i --save @fortawesome/free-regular-svg-icons
npm i --save @fortawesome/free-solid-svg-icons
- 引入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)
}
- 使用
<template>
<div id="app">
<font-awesome-icon icon="user-secret" />
</div>
</template>
原文链接: https://www.cnblogs.com/guangzan/p/14693444.html
vue2 项目引入Fontawesome的更多相关文章
- vue2.0 引入font-awesome
网上的大部分教程复杂而且难看懂,其实两步就能搞定. 先cnpm install font-awesome --save引入依赖 然后在main.js引入 font-awesome/css/font-a ...
- VUE2 项目 引入 leaflet.draw全过程
leaflet.draw的参考文档:http://leaflet.github.io/Leaflet.draw/docs/leaflet-draw-latest.html 这个网址不稳定,多刷新几 ...
- vue学习笔记(三)- vue2.x引入Element-ui
webpack+vue2.x+element-ui 作者:狐狸家的鱼 本文链接:vue2.x引入Element-ui GitHub:sueRimn 1.新建项目 vue init webpack vu ...
- 解决在html中引入font-awesome的css文件后, 图标显示不出来
今天小颖在做项目时,需要在html文件中引入font-awesome.min.css,但是引入后: 以前小颖在用font-awesome库里的图标时,都是直接从node中下包,然后在main.js中引 ...
- vue2项目中引用外部js文件
vue2项目目录如下(utils文件夹是自己手工建的,然后在utils里新建js文件): 使用import导入文件时,注意路径,路径不对会报错: 导入之后使用外部js函数时,直接写导入时的名字加小括号 ...
- vue2.x引入threejs
@ 目录 vue2.x引入threejs npm安装 使用指定版本: 其他插件 实例 强调 vue2.x引入threejs npm安装 npm install three 使用指定版本: npm in ...
- 新项目引入gulp
1:安装npm:官网下载nodejs--https://nodejs.org/en/.进行安装npm;--http://jingyan.baidu.com/article/a17d528506d7f5 ...
- Xcode旧项目引入CocoaPod遇到的问题与解决
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...
- Android:认识R类、findViewById方法查找组件、@string查找字符、@color查找颜色、@drawable查找图片、@dimen某个组件尺寸定义、项目引入资源国际化
导入 之前都是断断续续的看了一些于如何使用android开发的文章.资料等,到目前位置很多基础的东西都不清楚,于是去学习了别人的课程,才了认识了R类.findViewById方法查找组件.项目引入资源 ...
- Flutter 即学即用系列博客——03 在旧有项目引入 Flutter
前言 其实如果打算在实际项目中引入 Flutter,完全将旧有项目改造成纯 Flutter 项目的可能性比较小,更多的是在旧有项目引入 Flutter. 因此本篇我们就说一说如何在旧有项目引入 Flu ...
随机推荐
- 失配树学习笔记 | P5829 【模板】失配树
简介 失配树(简称 Fail 树),是基于 KMP 的算法,可以高效的解决复杂的字符串前缀后缀关系问题. 前置知识: KMP 算法(求失配数组) 最近公共祖先(LCA) 希望大家看完这篇文章后可以理解 ...
- C Primer Plus (6.16) 編程練習
/*C Primer Plus (6.15) 6*/ 1 #include<stdio.h> 2 int main() 3 { 4 int i,j; 5 for(int i=0;i< ...
- python 第一二次教学笔记之数据操作
对Python 有一个认知 记住这是一个动态类型的,弱类型语言 ds =111.0 #弱类型 前面不用写明是具体什么类型 haobo=10 haobo = ds #类型转换不再有高低之分 hoabo ...
- 让 MSYS2 Bash 像 Git Bash 一样显示 Git 分支名称
Git for Windows 的 Bash 有一个很实用的功能,如果当前目录处于 Git 仓库中,那么命令行中会显示当前 Git 分支的名称(见下图). 然而原版的 MSYS2 Bash 没有这个功 ...
- vue学习笔记(一) ---- vue指令(总体大纲)
一.什么是Vue 官方文档:https://cn.vuejs.org/v2/guide/ 关键字: 渐进式框架 自底向上增量开发 视图层 单文件组件 复杂的单页应用 复杂的单页应用: 顾名思义,单页应 ...
- ChatGpt国内教程
近ChatGPT大火呀,小伙伴们是不是在网上看到各种和ChatGPT有趣聊天的截图,比如翻译代码.编写代码,奈何自己实力不够,被网络拒之门外,只能眼馋别人的东西.看别人玩,肯定不如自己玩一把舒服的啊. ...
- 简单了解C语言如何构建多文件项目
简单理解C语言如何构建工程 首先我们最好有一个好用的编辑器,vscode也好,visual studio也罢,dev也行,这里我们使用的是code::block: 一.了解C语言工程的构建原理 首 ...
- T02 ExtractSubject 项目开发总结
公纵号: 皮豪 博客:www.kbug.cn 邮箱:pphboy@qq.com 前言 看来已经是一种习惯,每次寒假都会开发一个项目出来.本次项目使用的是Qt GUI,语言是C++.不得不说,在业务上写 ...
- Spring Cloud 2022.0.1 Spring Cloud Zookeeper4.0
官网: https://spring.io/ 左侧菜单 向下找到 spring Cloud Zookeeper 所有我们希望看到的都在 Reference Doc 中,点击进入 连接zookeeper ...
- Servlet HTTP Request Response笔记
# 今日内容: 1. Servlet 2. HTTP协议 3. Request## Servlet: 1. 概念 2. 步骤 3. 执行原理 4. 生命周期 ...