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获取GridView选择的行内容
Apr 14 Javascript
jQuery检测鼠标左键和右键点击的方法
Mar 17 Javascript
谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)
Oct 01 Javascript
整理Javascript函数学习笔记
Dec 01 Javascript
jQuery 中的 DOM 操作
Apr 26 Javascript
JavaScript学习笔记整理_setTimeout的应用
Sep 19 Javascript
JS动态计算移动端rem的解决方案
Oct 14 Javascript
Node Puppeteer图像识别实现百度指数爬虫的示例
Feb 22 Javascript
angular4强制刷新视图的方法
Oct 09 Javascript
微信小程序页面滚动到指定位置代码实例
Sep 07 Javascript
Vuex的热更替如何实现
Jun 05 Javascript
js实现复制粘贴的两种方法
Dec 04 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
在IIS7.0下面配置PHP 5.3.2运行环境的方法
2010/04/13 PHP
Php-Redis安装测试笔记
2015/03/05 PHP
php使用Image Magick将PDF文件转换为JPG文件的方法
2015/04/01 PHP
PHP判断是否连接上网络的方法
2015/07/01 PHP
Laravel中log无法写入问题的解决
2017/06/17 PHP
Javascript - HTML的request类
2006/07/15 Javascript
写的htc的数据表格
2007/01/20 Javascript
Js callBack 返回前一页的js方法
2008/11/30 Javascript
ie和firefox不兼容的解决方法集合
2009/04/28 Javascript
ExtJs扩展之GroupPropertyGrid代码
2010/03/05 Javascript
js改变img标签的src属性在IE下没反应的解决方法
2013/07/23 Javascript
js带按钮的提示框可供选择示例代码
2013/09/17 Javascript
让JavaScript的Alert弹出框失效的方法禁止弹出警告框
2014/09/03 Javascript
JSON格式化输出
2014/11/10 Javascript
JavaScript判断用户是否对表单进行了修改的方法
2015/03/18 Javascript
jQuery插件StickUp实现网页导航置顶
2015/04/12 Javascript
js判断输入字符串是否为空、空格、null的方法总结
2016/06/14 Javascript
JS 动态判断PC和手机浏览器实现代码
2016/09/21 Javascript
js实现上传文件添加和删除文件选择框
2016/10/24 Javascript
JavaScript ES6中CLASS的使用详解
2016/11/22 Javascript
Vue.js中用webpack合并打包多个组件并实现按需加载
2017/02/17 Javascript
vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)
2019/05/10 Javascript
Python中的自省(反射)详解
2015/06/02 Python
Python的Django中将文件上传至七牛云存储的代码分享
2016/06/03 Python
python如何读写csv数据
2018/03/21 Python
基于python中theano库的线性回归
2018/08/31 Python
python实现银联支付和支付宝支付接入
2019/05/07 Python
python requests包的request()函数中的参数-params和data的区别介绍
2020/05/05 Python
python连接手机自动搜集蚂蚁森林能量的实现代码
2021/02/24 Python
三星加拿大官方网上商店:Samsung CA
2020/12/18 全球购物
外企C语言笔试题
2013/11/10 面试题
教师业务培训方案
2014/05/01 职场文书
2014年业务工作总结
2014/11/17 职场文书
2016暑期社会实践新闻稿
2015/11/25 职场文书
2016形势与政策学习心得体会
2016/01/12 职场文书
7个关于Python的经典基础案例
2021/11/07 Python