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 ...
随机推荐
- [深度学习] tf.keras入门4-过拟合和欠拟合
过拟合和欠拟合 简单来说过拟合就是模型训练集精度高,测试集训练精度低:欠拟合则是模型训练集和测试集训练精度都低. 官方文档地址为 https://tensorflow.google.cn/tutori ...
- [常用工具] Python视频解码库DeFFcode使用指北
DeFFcode是一种跨平台的高性能视频帧解码器,通过内部封装ffmpeg,提供GPU解码支持,几行python代码就能够快速解码视频帧,并具有强大的错误处理能力.DeFFcode的APIs支持多种媒 ...
- python进阶之路19 地狱之门购物车!!!!
地狱之门 # # 项目功能 # 1.用户注册 # 2.用户登录 # 3.添加购物车 # 4.结算购物车 # # 项目说明 # 用户数据采用json格式存储到文件目录db下 一个用户一个单独的文件 # ...
- SSM框架——SpringMVC
SpringMVC MVC三层架构 Controller层:取得前端数据.调用相关业务逻辑.转发/重定向到其他页面 Model层:实现业务逻辑.保存数据 View层:显示页面 1.第一个MVC程序 新 ...
- Visual Studio2017快速收缩/扩展代码块
首先要设置伸缩函数的同时也伸缩region块: 快捷键 Ctrl+M+O 收缩所有方法 Ctrl+M+L 展开所有方法
- 小白从零到AIoT之路(前言)
什么是AIoT 简单来说就是AI(人工智能)+IoT(物联网)= AIoT(人工智能物联网). AIoT融合AI技术和IoT技术,通过物联网产生.收集来自不同维度的.海量的数据存储于云端.边缘端,再通 ...
- Node.js学习笔记----day02
认真学习,认真记录,每天都要有进步呀!!! 加油叭!!! 一.简单实现Apache功能 var http = require('http') var fs = require('fs') // 1. ...
- 【已解决】csv数据导入sql by sqlyog 乱码+无法导入导入步骤分析等总结
csv数据导入sql 用sqlyog工具 首先是创建一个数据库 --> 然后右键点击数据库->选择创建表 ->表名自己写,让在引擎这里选择csv 然后注意 把非空都勾选了!不然会报错 ...
- 学习Java Day9
今天学习了switch,以及bread和read_date的使用,还学习了大数
- Spring(IOC自动装配-基于注解开发)
Spring IoC 自动装载 autowire: 自动装载是Spring提供的一种更加简单的方式,来完成DI,不需要手动配置property ,IoC容器会自动选择Bean玩成注入. 自动装载俩种: ...