I am currently utilizing the coreui-free-vue-admin-template for a project. Take a look at this https://i.sstatic.net/UcK7s.png
The image above shows a screenshot of _nav.js. The first item's icon is displaying correctly, however, the icons for the other items are not showing up.
Here is another image link for reference: https://i.sstatic.net/7R3wf.png
If you have any insights on how to properly implement this template, your advice would be greatly appreciated. This code snippet pertains to TheSidebar.vue.
<template>
<CSidebar
fixed
:minimize="minimize"
:show="show"
@update:show="(value) => $store.commit('set', ['sidebarShow', value])"
>
<CSidebarBrand class="d-md-down-none" to="/">
<CIcon
class="c-sidebar-brand-full"
name="logo"
size="custom-size"
:height="35"
viewBox="0 0 556 134"
/>
<CIcon
class="c-sidebar-brand-minimized"
name="logo"
size="custom-size"
:height="35"
viewBox="0 0 110 134"
/>
</CSidebarBrand>
<CRenderFunction flat :content-to-render="$options.nav"/>
<CSidebarMinimizer
class="d-md-down-none"
@click.native="$store.commit('set', ['sidebarMinimize', !minimize])"
/>
</CSidebar>
</template>
<script>
import nav from './_nav'
export default {
name: 'TheSidebar',
nav,
computed: {
show () {
return this.$store.state.sidebarShow
},
minimize () {
return this.$store.state.sidebarMinimize
}
}
}
</script>