Change toggle icon that looks like this: |<
calicoder77 opened this issue · comments
Good day, I got this code and looking how to change the toggle icon that looks like this |<
to one that Font Awesome free offers. I took a look at the issues here and none of the solutions work for me. Any ideas? Thanks a million!
<script setup>
import { Sidebarmenu } from 'vue-sidebar-menu'
import 'vue-sidebar-menu/dist/vue-sidebar-menu.css'
import '@fontawesome/fontawesome-free/css/all.css'
</script>
<style>
.v-sidebar-menu .vsm--toggle-btn {
justify-content: left;
}
</style>
<template>
<sidebar-menu :menu="menu" />
<div>Test Page</div>
</template>
You can use slot
<sidebar-menu>
<template v-slot:toggle-icon>toggle-icon</template>
</sidebar-menu>
Hi @yaminncco that also doesn't work. The current icon |< is always present. Is there no way to switch it out for another icon to show?
I need more details on why the slot doesn't work, or a minimal reproduction.
I was able to hide the default icon with:
.vsm--toggle-btn_default {
display: none;
}
To add another icon, you can do this:
.vsm--toggle-btn::after {
font: var(--fa-font-solid);
content: ' \****'; <-- insert unicode for icon here
}