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 ...
随机推荐
- iOS根据两点经纬度坐标计算指南针方位角
目录 需求 设计 代码实现 新建CLLocation 分类方法 调用示例 结论 需求 在地图导航时,始终保持当前路段竖直超前. 设计 因地图暴露的方法中只有设置地图相对于正北的方向角的方法.因此,需要 ...
- [WPF]使用Fody提高效率
下载安装及使用 代码实例 public class Person:INotifyPropertyChanged { public event PropertyChangedEventHandler P ...
- day05-Spring管理Bean-IOC-03
Spring管理Bean-IOC-03 2.基于XML配置bean 2.15bean的生命周期 bean对象的创建是由JVM完成的,然后执行如下方法: 执行构造器 执行set相关方法 调用bean的初 ...
- Scrapy爬虫框架快速入门
安装scrapy pip install scrapy -i https://pypi.douban.com/simple/ 安装过程可能遇到的问题 版本问题导致一些辅助库没有安装好,需要手动下载并安 ...
- angular引入http服务创建服务注入
- PHP转Go实践:xjson解析神器「开源工具集」
前言 近期会更新一系列开源项目的文章,新的一年会和大家做更多的开源项目,也欢迎大家加入进来. xutil 今天分享的文章源自于开源项目jinzaigo/xutil的封装. 在封装过程中,劲仔将实现原理 ...
- Stream流中的常用方法_skip-Stream流中的常用方法_concat
Stream流中的常用方法_skip 如果希望跳过前几个元素,可以使用skip方法获取一个截取之后的新流∶ 如果流的当前长度大于n,则跳过前n个;否则将会得到一个长度为0的空流.基本使用: Strea ...
- Lock锁-线程状态概述
Lock锁 java.util.concurrent.locks.Lock机制提供了比synchronized代码块和synchronized方法更广泛的锁定操作,同步代码块/同步方法具有的功能Loc ...
- 行为型模式 - 解释器模式Interpreter
学习而来,代码是自己敲的.也有些自己的理解在里边,有问题希望大家指出. 模式的定义与特点 解释器模式(Interperter Pattern),给定一个语言,定义它的文法表示,并定义一个解释器,这个解 ...
- element ui el-date-picker 禁止选择指定日期
1.日期选择器组件代码 <el-col :span="20"> <el-form-item label="活动起始日期值" prop=&quo ...