Vue.js 在CoreUI侧边栏中使用字体图标

我正在尝试将管理面板模板侧栏中的默认CoreUI图标替换为字体很棒的图标

我已经使用FontAwesome for vue成功安装了FontAwesome，并且使用

语法可以很好地显示图标。但我无法在CoreUI侧边栏组件中显示相同的图标

这是我的

\u 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'

，

图标：'fas-fa-tasks'

，

图标：'faTasks'

，等等，但没有任何效果

如下图所示，“任务”图标显示在卡体中（使用

），但不显示在项目项的侧栏中。

建议使用

fontIcon

api而不是

Icon

，但是这需要导入图标的CSS版本，使用推荐的Font-Awesome安装指南我找不到

---

在这一点上，我如何导入CSS图标以使其与组件一起工作，或者是否有一种方法可以直接引用字体可怕的图标？

您需要为自定义内容传递子项

csidebaravitem

（默认情况下，组件仅支持

CIcon

组件配置）

测试02

您可以通过CRenderFunction呈现侧边栏，此处提供了哪些文档：

---

此外，

csidebaravitem

和

CIcon

组件也记录在此网站上

您需要传递子组件

csidebaravitem

，以获取自定义内容（默认情况下，组件仅支持

CIcon

组件配置）

测试02

您可以通过CRenderFunction呈现侧边栏，此处提供了哪些文档：

---

此外，

csidebaravitem

和

CIcon

组件也记录在此网站上

因此我必须将默认的

csidebaravitem

模板替换为与上述代码类似的自定义模板？任何指针都可以告诉我如何做到这一点（对Vue来说还是新手）。因此，我设法注册了我的自定义版本的

csidebaravitem

组件，它就可以工作了。但是在

CRenderFunction

内部是否有一个插槽覆盖的方法呢？是的，CRenderFunction只是用于呈现组件树。所以我必须用像上面代码一样的自定义模板替换默认的

csidebaravitem

模板？任何指针都可以告诉我如何做到这一点（对Vue来说还是新手）。因此，我设法注册了我的自定义版本的

csidebaravitem

组件，它就可以工作了。但是，在

CRenderFunction

中是否有一种方法可以对插槽覆盖执行相同的操作？是的，CRenderFunction仅用于渲染组件树。

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