如何将fontawsome图标导入侧栏 - 菜单
我正在一个vue.js项目中工作,
我正在使用fontawsome库
,那里有我的版本:
"@fortawesome/fontawesome-svg-core": "^1.2.34",
"@fortawesome/free-solid-svg-icons": "^5.15.2",
"@fortawesome/vue-fontawesome": "^2.0.2",
我在main.js上这样做:
import { library } from "@fortawesome/fontawesome-svg-core";
import { faChessKnight, faChessQueen, faChessKing, faChartLine } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
library.add(faChessKing);
Vue.component("font-awesome-icon", FontAwesomeIcon);
现在我可以以这种方式添加图标:
<font-awesome-icon icon="chess-king" />
但是/和
我使用vue-sidebar-menu:< a href =“ https://npm.io/package/vue-sidebar-menu” rel =“ nofollow noreferrer”> vue-sidebar-menu
,我想使用Vue-Sidebar-menu结构内的Fontawsomeicon:
href: '/',
title: 'Dashboard',
icon: I want to use icon from fontAwsome here
在这里使用FontawSome图标的正确语法是什么?
PS:这是Fachessking的控制台日志:
Object { prefix: "fas", iconName: "chess-king", icon: (5) […] }
icon: Array(5) [ 448, 512, [], … ]
0: 448
1: 512
2: Array []
3: "f43f"
4: "M400 448H48a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h352a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm16-288H256v-48h40a8 8 0 0 0 8-8V56a8 8 0 0 0-8-8h-40V8a8 8 0 0 0-8-8h-48a8 8 0 0 0-8 8v40h-40a8 8 0 0 0-8 8v48a8 8 0 0 0 8 8h40v48H32a32 32 0 0 0-30.52 41.54L74.56 416h298.88l73.08-214.46A32 32 0 0 0 416 160z"
length: 5
<prototype>: Array []
iconName: "chess-king"
prefix: "fas"
<prototype>: Object { … }
编辑: vue.js版本是“ vue”:“^2.6.12”
I am working in a Vue.js project
I am using fontAwsome library
there are my versions:
"@fortawesome/fontawesome-svg-core": "^1.2.34",
"@fortawesome/free-solid-svg-icons": "^5.15.2",
"@fortawesome/vue-fontawesome": "^2.0.2",
I did this at main.js:
import { library } from "@fortawesome/fontawesome-svg-core";
import { faChessKnight, faChessQueen, faChessKing, faChartLine } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
library.add(faChessKing);
Vue.component("font-awesome-icon", FontAwesomeIcon);
and now I can add the icons this way:
<font-awesome-icon icon="chess-king" />
BUT/AND
I am using vue-sidebar-menu: vue-sidebar-menu
and I would like to use the fontAwsomeIcons inside the vue-sidebar-menu structure:
href: '/',
title: 'Dashboard',
icon: I want to use icon from fontAwsome here
what is the correct syntax to use fontAwsome icons here?
PS: this is a console log of faChessKing:
Object { prefix: "fas", iconName: "chess-king", icon: (5) […] }
icon: Array(5) [ 448, 512, [], … ]
0: 448
1: 512
2: Array []
3: "f43f"
4: "M400 448H48a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h352a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm16-288H256v-48h40a8 8 0 0 0 8-8V56a8 8 0 0 0-8-8h-40V8a8 8 0 0 0-8-8h-48a8 8 0 0 0-8 8v40h-40a8 8 0 0 0-8 8v48a8 8 0 0 0 8 8h40v48H32a32 32 0 0 0-30.52 41.54L74.56 416h298.88l73.08-214.46A32 32 0 0 0 416 160z"
length: 5
<prototype>: Array []
iconName: "chess-king"
prefix: "fas"
<prototype>: Object { … }
EDIT:
the vue.js version is "vue": "^2.6.12"
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
在一个Fresh Vue 3项目中尝试了此操作,以下代码样本应适用于您。这两个版本之间存在一些微小的变化,我想这是问题所在。
首先,导入图标
使用
,如果您需要使用插槽进行切换和下拉图标,则
,这将对应于:如果您仅使用几个图标,另一个选项就是简单地下载所需的资产,来自FA。这样可以节省您必须为如此简单的功能添加所有这些字体可观的依赖项。例如
图标:{element:'span',class:'my-icon',属性:{},text:'''}
Tried this out in a fresh Vue 3 project, and the following code sample should work for you. There were some slight changes between the two versions, which I guess was the issue.
First, import the icon
Then, to use
If you need to use slots for the toggle and dropdown icon, then this would correspond to:
If you're only using a few icons, another option would be to simply download the assets you need, from FA. This saves you having to add all those Font-Awesome dependencies for such a simple feature. E.g.
icon: { element: 'span', class: 'my-icon', attributes: {}, text: ''}