在 CoreUI 侧边栏中使用 Font Awesome 图标答案

【问题标题】：Use Font Awesome icons in CoreUI sidebar在 CoreUI 侧边栏中使用 Font Awesome 图标
【发布时间】：2020-11-17 10:07:41
【问题描述】：

我正在尝试用 Font Awesome 图标替换管理面板模板侧边栏中的默认 CoreUI 图标。

我已经使用 vue 的 FontAwesome 的 latest official installation instructions 成功安装了 Font-Awesome，并且可以使用 <font-awesome-icon icon="tasks" /> 语法很好地显示图标。但我无法在 CoreUI 侧边栏组件中显示相同的图标。

这是我的_nav.js：

export default [
  {
    _name: 'CSidebarNav',
    _children: [
      {
        _name: 'CSidebarNavItem',
        name: 'Dashboard',
        to: '/dashboard',
        icon: 'cil-speedometer'
      },
      {
        _name: 'CSidebarNavItem',
        name: 'Account',
        to: '/account',
        icon: 'cil-bank'
      },
      {
        _name: 'CSidebarNavItem',
        name: 'Projects',
        to: '/projects',
        fontIcon: 'fas fa-tasks'
      }
    ]
  }
]

到目前为止，我尝试了fontIcon: 'fas fa-tasks'、icon: 'fas fa-tasks'、icon: 'faTasks' 等，但没有任何效果。

如下所示，“任务”图标显示在卡片正文中（使用 <font-awesome-icon icon="tasks" />），但未显示在 Project 项的侧边栏中。

This link 建议使用fontIcon api 而不是Icon，但是这需要导入CSS 版本的图标，我使用推荐的Font Awesome 安装指南找不到。

此时我该如何导入 CSS 图标以便它与 CSidebarNavItem 组件一起使用，或者有没有办法直接引用 Font Awesome 图标？

【问题讨论】：

标签： vue.js font-awesome core-ui

【解决方案1】：

自定义内容需要传递childrenCSidebarNavItem（组件默认只支持CIcon组件配置）

 <CSidebarNavItem>
   <CLink
     class="c-sidebar-nav-link"   
     to="/home/test02"
     :exact="true"
     activeClassName="c-active"
   >
     <FontAwesomeIcon class="c-sidebar-nav-icon" icon="faCoffee" />
     Test02
   </CLink>
  </CSidebarNavItem>

您已通过 CRenderFunction 呈现侧边栏，此处提供了哪些文档： https://coreui.io/vue/docs/components/render-function.html 此外，CSidebarNavItem 和 CIconcomponents 也记录在此站点上

【讨论】：

所以我必须将默认的CSidebarNavItem 模板替换为自定义模板，如上面的代码？任何我如何做到这一点的指针（对于 Vue 来说还是新手）。
所以我设法注册了我的 CSidebarNavItem 组件的自定义版本并且它可以工作。但是有没有办法在 CRenderFunction 中使用插槽覆盖来做同样的事情？
是的，CRenderFunction 只是用于渲染组件树。

【解决方案2】：

只需在 i 标签中添加 core ui 和 font Awesome css 类

{
    _tag: 'CSidebarNavItem',
     name: 'Category',
     to: '/category',
     icon: <i class="fad fa-acorn c-sidebar-nav-icon"></i>,
},

【讨论】：

这失败了……至少在 coreui vue 4.0 中
请使用检查元素检查您的 Core ui 版本类 'c-sidebar-nav-icon'

【解决方案3】：

这是 fontawesome 图标门户 https://fontawesome.com/v4.7/icon/address-book 。这里的图标名称有address-book。您无法直接访问 coreui 模板中的 address-book 名称。

你应该使用这个fa键

发发地址簿

示例代码，

{
 name: 'Address',
 url: '/address',
 icon: 'fa fa-address-book',
},

【讨论】：