Upon further examination, it seems there may be a styling override causing issues. Moving the dropdown from the bottom to the nav area results in the disappearance of the down arrow icon. Similarly, relocating the "lang" drop-down to the body reveals the missing arrow as well.
An additional edit indicates that another navigation bar style is overriding the icons, suggesting the use of SCOPE would resolve the problem.
The navbar SVG down arrows are not displaying properly, while most other icons function correctly. The code snippet below is essentially copied and pasted from a Bootstrap Vue example:
<b-navbar toggleable="lg" type="dark" >
<b-navbar-brand href="#"><img src="" class="d-inline-block align-top" width="220" height="45"></b-navbar-brand>
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
<b-collapse id="nav-collapse" is-nav>
<b-navbar-nav>
<b-nav-item href="#"></b-nav-item>
<b-nav-item href="#">Home</b-nav-item>
<b-nav-item href="#">Contact Us</b-nav-item>
<b-nav-item href="#">FAQ</b-nav-item>
</b-navbar-nav>
<!-- Right aligned nav items -->
<b-navbar-nav class="ml-auto">
<b-nav-item-dropdown text="Lang" right>
<b-dropdown-item href="#">EN</b-dropdown-item>
<b-dropdown-item href="#">ES</b-dropdown-item>
</b-nav-item-dropdown>
<b-nav-item-dropdown right>
<template v-slot:button-content>
<em>Welcome, Friend</em>
</template>
<b-dropdown-item href="#">Profile</b-dropdown-item>
<b-dropdown-item href="#">Sign Out</b-dropdown-item>
</b-nav-item-dropdown>
</b-navbar-nav>
</b-collapse>
</b-navbar>
A variety of icons work fine, but some do not, with no errors reported. According to the documentation, icons are not installed by default; therefore, they were manually installed using the provided links:
npm i bootstrap-icons
I implemented a plugin included in nuxt.config.js for functionality. Although most elements are functioning correctly, the icons seem to be an exception.
plugins: [
'@/plugins/bootstrap-vue.js'
,'@/plugins/mixins/user.js'
],
The plugin content 'bootstrap.vue.js' is shown below:
import Vue from 'vue'
import { BootstrapVue, BootstrapVueIcons } from 'bootstrap-vue'
Vue.use(BootstrapVue)
Vue.use(BootstrapVueIcons)
An attempt was made to include the icons explicitly:
import {BootstrapVue,BIconArrowUp, BIconArrowDown } from 'bootstrap-vue'
Vue.use(BootstrapVue)
import { BootstrapVueIcons } from 'bootstrap-vue'
Vue.use(BootstrapVueIcons)[![enter image description here][1]][1]
Vue.component('BIconArrowUp', BIconArrowUp)
Vue.component('BIconArrowDown', BIconArrowDown)
Observations:
1) No relevant icons found in node_modules/bootstrap folder.
2) Icons identified in node_modules/bootstrap-vue folder including -icons.common.js, -icons.css files.
Additional attempts were made to add icons directly to specific elements using various methods:
<b-nav-item-dropdown icon="circle-fill" text="Lang" right>
A comparison between correct icons on the Bootstrap Vue site and missing icons in the project is showcased--the disparity points to the issue being isolated within the b-navbar-dropdown component specifically.
Solutions or suggestions are welcomed!