首页 > 其他分享 >vue2 项目引入Fontawesome

vue2 项目引入Fontawesome

时间:2023-01-11 13:55:06浏览次数:54  
标签:npm -- svg Fontawesome fortawesome vue2 fontawesome 引入 save

官网: 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)
}

原文链接: https://www.cnblogs.com/guangzan/p/14693444.html

标签:npm,--,svg,Fontawesome,fortawesome,vue2,fontawesome,引入,save
From: https://www.cnblogs.com/-LemonWater-/p/17043505.html

相关文章

  • Vue2.002.开发过程中部分功能实现
    01.Vue中动态加载图片失败时,默认图片的配置>> 引入图片:  importdefaultImgfrom'@/assets/default.png'>> img 标签配置@error 事件,   @error="......
  • JS_0072:静态html引入 js, css 添加随机数后缀
    1,<!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"><title>展示模型</title><metaname="viewport"content="width=device-width,initia......
  • vue2,新闻渲染效果
    做一个新闻渲染的效果,最后呈现的效果   数据放入父组件中,公共样式放入子组件中父组件中引入子组件,放入数组,然后进行样式渲染<template><divclass="zong"><n......
  • 学习-Vue2-Vue实例-数据与方法-数据的响应式
    当一个实例被创建时,它将data对象中的所有的property加入到Vue的响应式系统中。当这些property的值发生改变时,视图将会产生“响应”,即匹配更新为新的值。当这些数据改变时,......
  • maven引入本地jar包
    一、在pom文件中引用时使用本地路径:首先把jar包放到项目中,在目录下新建lib目录,将jar包放入lib下在pom下引入jar包<dependency><groupId>com.alibaba</groupId><arti......
  • vue cli -webpack 引入字体文件.ttf不生效(开发环境)
    本示例是引入的‘站酷庆科黄油体’下载字体文件后一定要在windows中打开.ttf文件看一下字体名称是什么保证assets下xxfont.css文件里的font-family与下载字体文件里看到......
  • CSS引入方式
    内联式、行内引入:引入方法直接在html的标签中书写css。这是一种最为原始也是最容易理解的样式内容书写在html标签的style属性中,多个css样式可以写在一起,使用分号隔开......
  • spring-cloud-gateway引入
    spring-cloud-gateway引入总结(含修改响应body)一、版本pom.xml<!--仅保留了spring系的版本--><properties><springframework.version>5.3.22</springframework.v......
  • 盖瑞特涡轮增压器 | 完成财务重组,引入新资本并优化资产负债表
    从中桥投资、橡树资本和现有股东筹集13亿美元的新股本将长期债务减少至12.5亿美元等值定期贷款和3亿美元循环信贷融资取消石棉赔偿并解决与霍尼韦尔的所有诉讼增强资源和灵......
  • vue-awesome-swiper与vue2的版本对应关系
    1.安装  注意:这里一定要对应swiper 和vue-awesome-swiper版本,如果不对应,vue就会各种报错  2.引入2.1全局引入main.js  2.2局部引入    3......