Use Font Awesome icons in CoreUI sidebar

user_445757 0
Viewed 2095

I'm trying to replace the default CoreUI icons from the admin panel template sidebar with a Font Awesome icons.

I've installed Font-Awesome successfully using the latest official installation instructions of FontAwesome for vue and can display the icons just fine using the <font-awesome-icon icon="tasks" /> syntax. But I can't get the same icon to show up in the CoreUI Sidebar component.

Here is my _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'
      }
    ]
  }
]

So far I tried fontIcon: 'fas fa-tasks', icon: 'fas fa-tasks', icon: 'faTasks', etc. but nothing works.

As you can see below, the "tasks" icon show up in the card body (using <font-awesome-icon icon="tasks" />), but not in the sidebar for the Project item. Current Result

This link suggest using fontIcon api instead of Icon, however this requires the CSS versions of icons to be imported, which I can't find using the recommended Font Awesome installation guide.

At this point how could I either import the CSS icons so it works with the CSidebarNavItem component, or is there a way to reference a Font Awesome icon directly ?

core-ui font-awesome vue.js
3 Answers

You need to pass children CSidebarNavItem for custom content (component supports only CIcon component configuration by default)

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

You have sidebar rendered through CRenderFunction which docs are available here: https://coreui.io/vue/docs/components/render-function.html Also CSidebarNavItem and CIconcomponents are documented on this site

user_98463090

just add core ui and font Awesome css classes together in i tag

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

This is fontawesome icon portal https://fontawesome.com/v4.7/icon/address-book . Here icon name has address-book. You can't access directly address-book name in coreui template.

you should use this fa key

fa fa-address-book

sample code,

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