如何将fontawsome图标导入侧栏 - 菜单

发布于 2025-01-27 14:06:38 字数 1845 浏览 2 评论 0原文

我正在一个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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

东走西顾 2025-02-03 14:06:38

在一个Fresh 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。这样可以节省您必须为如此简单的功能添加所有这些字体可观的依赖项。例如

图标:{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

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)

Then, to use

// 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'
    }
  }
}

If you need to use slots for the toggle and dropdown icon, then this would correspond to:

<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>

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: ''}

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文