vue配置font-awesome5的方法步骤


Posted in Javascript onJanuary 27, 2019

前端小伙伴们都知道Font Awesome图标库,它具有丰富的常用图标,笔者开发时也经常使用,省却了自己到处找图标的困扰,当然阿里的iconfont也不错,不过它比较杂乱,找的图标有时候不是配套的,尺寸和比例上有些偏差,即使你只使用某一个图标库的图标难免也会有收录不全的情况(这是笔者的使用体验,绝对没有贬低iconfont的意思,勿喷),Font Awesome通过几年的发展已经收录了互联网最常用的图标,绝对能满足大多数人的开发需求(有美工还用自己动手?!!)当然,看标题就知道Font Awesome已经进入5时代,使用方法上也和4以前的版本有所不同,而且还增加了收费版。。。当然免费版已经足够大家使用啦!下面笔者就给大伙儿讲讲如何在自己的vue开发项目中使用Font Awesome 5

vue的配置就暂且不说,主要是之后的font-awesome5的配置:

1、安装fontawesome基础配置

npm i --save @fortawesome/fontawesome
npm i --save @fortawesome/vue-fontawesome

2、安装fontawesome样式依赖

npm i --save @forawesome/fontawesome-free-solid
npm i --save @forawesome/fontawesome-free-regular
npm i --save @fortawesome/fontawesome-free-brands

或者两步合一

npm i --save @fortawesome/fontawesome @fortawesome/vue-fontawesome @forawesome/fontawesome-free-solid @forawesome/fontawesome-free-regular @fortawesome/fontawesome-free-brands

vue配置font-awesome5的方法步骤

3、在main.js中配置font-awesome

import fontawesome from '@fortawesome/fontawesome'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import solid from '@fortawesome/fontawesome-free-solid'
import regular from '@fortawesome/fontawesome-free-regular'
import brands from '@fortawesome/fontawesome-free-brands'
fontawesome.library.add(solid)
fontawesome.library.add(regular)
fontawesome.library.add(brands)
Vue.component('font-awesome-icon', FontAwesomeIcon)

vue配置font-awesome5的方法步骤

4、在vue页面使用

<font-awesome-icon :icon="['far','address-book']"/>

当然并非一定要写成font-awesome-icon标签,它只是组件与main.js里面的Vue.component对照,main.js的Vue.component只是将其作为全局组件。在:icon="['样式','省去样式前缀的图表名']",

vue配置font-awesome5的方法步骤

上面这些是使用font-awesome 5.0.13

对于5.6.3版本来说,因为新增加了Font Awesome SVG Core.所以5.6.3的安装:

1、安装fontawesome基础配置

npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/vue-fontawesome

2、在main.js中配置font-awesome

import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
library.add(fas)
Vue.component('font-awesome-icon', FontAwesomeIcon)

3、在页面中可以写入

<font-awesome-icon icon="address-book" />

<font-awesome-icon :icon="['fas', 'address-book']" />

对于非fas的可以直接写

<font-awesome-icon far icon="spinner" />

vue配置font-awesome5的方法步骤

还剩下fal和fab的这两项在5.6.3版本中尚不知道不用pro该怎么安装,求大佬补充

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
让JavaScript和其它资源并发下载的方法
Oct 16 Javascript
轻松实现JavaScript图片切换
Jan 12 Javascript
Bootstrap每天必学之滚动监听
Mar 16 Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
Apr 05 Javascript
jQuery操作iframe中js函数的方法小结
Jul 06 Javascript
对js中回调函数的一些看法
Aug 29 Javascript
深入理解jQuery3.0的domManip函数
Sep 01 Javascript
网站申请不到支付宝接口、微信接口,免接口收款实现方式几种解决办法
Dec 14 Javascript
Javascript 实现计算器时间功能详解及实例(二)
Jan 08 Javascript
从零开始学习Node.js系列教程四:多页面实现数学运算的client端和server端示例
Apr 13 Javascript
laypage.js分页插件使用方法详解
Jul 27 Javascript
JS实现利用闭包判断Dom元素和滚动条的方向示例
Aug 26 Javascript
详解如何用webpack4从零开始构建react开发环境
Jan 27 #Javascript
vue中轮训器的使用
Jan 27 #Javascript
Vue组件教程之Toast(Vue.extend 方式)详解
Jan 27 #Javascript
JavaScript变量提升和严格模式实例分析
Jan 27 #Javascript
超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法
Jan 27 #Javascript
PWA介绍及快速上手搭建一个PWA应用的方法
Jan 27 #Javascript
原生JS检测CSS3动画是否结束的方法详解
Jan 27 #Javascript
You might like
聊天室php&amp;mysql(五)
2006/10/09 PHP
ioncube_loader_win_5.2.dll的错误解决方法
2015/01/04 PHP
详解使用php调用微信接口上传永久素材
2017/04/11 PHP
PHP abstract 抽象类定义与用法示例
2018/05/29 PHP
php实现根据身份证获取精准年龄
2020/02/26 PHP
TP5框架实现一次选择多张图片并预览的方法示例
2020/04/04 PHP
用javascript获得地址栏参数的两种方法
2006/11/08 Javascript
跨浏览器的事件对象介绍
2012/06/27 Javascript
JavaScript高级程序设计(第3版)学习笔记13 ECMAScript5新特性
2012/10/11 Javascript
extjs 04_grid 单击事件新发现
2012/11/27 Javascript
js全屏显示显示代码的三种方法
2013/11/11 Javascript
Javascript基础教程之switch语句
2015/01/18 Javascript
Javascript基于AJAX回调函数传递参数实例分析
2015/12/15 Javascript
jQuery与Ajax以及序列化
2016/02/01 Javascript
JS封装的三级联动菜单(使用时只需要一行js代码)
2016/10/24 Javascript
JS实现的简单标签点击切换功能示例
2017/09/21 Javascript
JS实现显示当前日期的实例代码
2018/07/03 Javascript
JavaScript实现的前端AES加密解密功能【基于CryptoJS】
2018/08/28 Javascript
[50:01]Ti4 冒泡赛第二天 NEWBEE vs Titan
2014/07/15 DOTA
[46:00]Ti4 冒泡赛第二轮LGD vs C9 2
2014/07/14 DOTA
python文件写入实例分析
2015/04/08 Python
Python中list列表的一些进阶使用方法介绍
2015/08/15 Python
python pandas中DataFrame类型数据操作函数的方法
2018/04/08 Python
对PyTorch torch.stack的实例讲解
2018/07/30 Python
pandas分区间,算频率的实例
2019/07/04 Python
Python如何使用字符打印照片
2020/01/03 Python
基于python实现微信好友数据分析(简单)
2020/02/16 Python
碧欧泉美国官网:Biotherm美国
2016/08/31 全球购物
竟聘演讲稿范文
2013/12/31 职场文书
2014年三八妇女节活动总结
2014/03/01 职场文书
产品质量承诺书
2014/03/27 职场文书
市级青年文明号申报材料
2014/05/26 职场文书
学术研讨会欢迎词
2015/01/26 职场文书
狼牙山五壮士观后感
2015/06/09 职场文书
运动会新闻稿
2015/07/17 职场文书
win10搭建配置ftp服务器的方法
2022/08/05 Servers