如何将字体 Awesome 图标导入侧边栏菜单

Question

我正在 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" />

BUT/AND

我正在使用 vue-sidebar-menu：vue-sidebar-menu 我想在 vue-sidebar-menu 结构中使用 fontAwsomeIcons：

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"

Answer 1

在一个新的 Vue 3 项目中试过了，下面的代码示例应该适合你。两个版本之间有一些细微的变化，我猜这是问题所在。

首先导入图标

import Vue from 'vue'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faChessKing } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(faChessKing)
Vue.component('font-awesome-icon', FontAwesomeIcon)

然后，使用

// menu
{
  href: '/',
  title: 'Dashboard',
  // Set icon as font-awesome
  icon: {
    element: 'font-awesome-icon',
    attributes: {
      // Then under icon.attributes, specify the icon to use
      icon: 'chess-king'
    }
  }
}

如果您需要为切换和下拉图标使用插槽，则对应于：

<sidebar-menu>
  <font-awesome-icon slot="toggle-icon" icon="chess-king"></font-awesome-icon>
  <font-awesome-icon slot="dropdown-icon" icon="chess-king"></font-awesome-icon>
</sidebar-menu>

如果您只使用几个图标，另一种选择是直接从 FA 下载您需要的资源。这样您就不必为这样一个简单的功能添加所有这些 Font-Awesome 依赖项。例如

icon: { element: 'span', class: 'my-icon', attributes: {}, text: ''}

如何将字体 Awesome 图标导入侧边栏菜单

how to import fontAwsome icon into sideBar-menu

font-awesome

vue.js