如何在 Vue 中使用 Font Awesome 字体图标
安装
npm install --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/vue-fontawesome
npm install --save @fortawesome/free-solid-svg-icons
- 第一行的依赖是 Font Awesome 的核心部分
- 第二行的依赖是 Font Awesome 在 Vue 环境中使用需要的 Vue 组件
- 第三行的依赖是 Font Awesome 的 solid 风格图标
配置
// src/main.jsimport Vue from 'vue'
import App from './App'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faUser, faCamera } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'library.add(faUser, faCamera)Vue.component('font-awesome-icon', FontAwesomeIcon)Vue.config.productionTip = false/* eslint-disable no-new */
new Vue({el: '#app',components: { App },template: '<App/>'
})
找图标
去 Font Awesome 官网找需要的图标。
class中的fas代表 solid 风格，fa-camera是这个图标的名称。需要在配置的时候引入该图标，引入完毕后还要在核心依赖中加入这个引入的图标。（即
如何在 Vue 中使用 Font Awesome 字体图标相关推荐
- Vue 中使用 Font Awesome 字体图标
1.安装 官网 转载于 https://blog.csdn.net/qq_40663357/article/details/99655930 安装基础依赖: npm install --save @f ...
- 在Vue中使用svg格式字体图标
在Vue中使用svg格式字体图标 1.新建一条分支,在新分支上修改,测试无误后合并到开发分支(建议) 2.先安装svg-sprite-loader ( 在打包时 处理svg格式并展示到项目中的过滤器 ...
- 如何在Vue中使用Font Awesome？
Font Awesome 字体为您提供可缩放矢量图标,它可以被定制大小.颜色.阴影以及任何可以用CSS的样式. 官网地址:http://www.fontawesome.com.cn/ 目录 1.安装依 ...
- vue中在线引入iconfont字体图标
记录在线引入iconfont字体图标. 在iconfont官网上添加项目并添加完需要的图标后,在资源管理==>我的项目中生成代码,再到vue项目中app.vue组件里的style标签下引用即可. ...
- 在Vue中引入 和风天气 字体图标
安装 点击进入官网下载和安装 | 和风天气图标,进行安装 npm i qweather-icons 或者 yarn add qweather-icons 引入 这里主要是将通过装包的方式引入,其他方式 ...
- vue中使用引用font-awesome字体图标fontawesome 简单方法
看见网上相关文档都需要安装好多依赖,有点麻烦,其实只需要安装一个font-awesome就行 第一步安装依赖 cnpm install font-awesome --save 或者 npm insta ...
- 在Vue中使用Font Awesome
在Vue中使用Font Awesome Font Awesome介绍 安装 配置 在Vue组件中使用图标 使用商标图标 源代码 Font Awesome介绍 Font Awesome是一套流行的图标字 ...
- Vue.js - Font Awesome字体图标的使用详解（vue-fontawesome库）
Vue.js - Font Awesome字体图标的使用详解(vue-fontawesome库) Font Awesome 是一个十分优秀的第三方图标库,我之前也写过文章介绍如何在 html 页面中使 ...
- vue中如何引入指定字体并且使用
vue中如何引入指定字体并且使用 步骤一:在src下建立文件夹fonts fonts下引入字体文件且建立一个css文件 在css中定义字体样式 @font-face { font-family: '字 ...
最新文章
- 题目1192：回文字符串
- docker 镜像重命名_Docker镜像管理（二）
- 一款 0 门槛轻松易上手的数据可视化工具
- 《深入理解java虚拟机》第2章 Java内存区域与内存溢出异常
- 当 IDENTITY_INSERT 设置为 OFF 时，不能向表 中的标识列插入显式值错误的解决方法...
- Java-环境搭建（Mac版）
- 软件项目可持续性运作地思考
- php 7 xhprof,php7中使用xhprof解析
- 《Smynes游戏模拟器官方版》
- erp系统服务器电脑配置,erp软件服务器电脑配置
- go语言的字符串长度
- 重磅出击: Rancher 2.4.x 迁移自定义 k8s 集群
- 01.朴素贝叶斯介绍
- pacemaker做nginx高可用
- 为什么接吻的时候一定要紧闭双眼？
- elasticsearch-java客户端测试
- 现实中如何评判路遥《人生》中的高加林？
- 网易数据治理工具产品实践
- 一种基于协作表示的特征提取投影方法（A collaborative representation based projections method for feature extraction）
- 如何从零开始学习Ruby
热门文章