登录  /  注册
首页 > web前端 > js教程 > 正文

vue配置font-awesome5的方法步骤

不言
发布: 2019-01-26 09:30:17
转载
7371人浏览过

本篇文章给大家带来的内容是关于vue配置font-awesome5的方法步骤,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

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
登录后复制

2437131052-5c4acf349e4c6_articlex.png

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)
登录后复制

2023119628-5c4acf8e3372e_articlex.png

4、在vue页面使用

<font-awesome-icon></font-awesome-icon>
登录后复制
登录后复制
登录后复制
登录后复制

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

1922066390-5c4ad02f80f5b_articlex.png

上面这些是使用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></font-awesome-icon>
登录后复制
登录后复制
登录后复制
登录后复制

<font-awesome-icon></font-awesome-icon>
登录后复制
登录后复制
登录后复制
登录后复制

对于非fas的可以直接写

<font-awesome-icon></font-awesome-icon>
登录后复制
登录后复制
登录后复制
登录后复制

1057973943-5c4ad17534cdd_articlex.png

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

以上就是vue配置font-awesome5的方法步骤的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:segmentfault网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号