vue.js - 在 CoreUI 侧边栏中使用 Font Awesome 图标

Question

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

我已经使用 latest official installation instructions 成功安装了 Font-Awesome FontAwesome for vue 并且可以使用 <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" /> )，但没有显示在项目 项的侧边栏中。

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

在这一点上，我如何才能导入 CSS 图标，使其与 CSidebarNavItem 一起工作？组件，或者有没有办法直接引用 Font Awesome 图标？

Answer 1

自定义内容需要传子CSidebarNavItem(组件默认只支持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.htmlCSidebarNavItem 和 CIcon 组件也记录在此站点上