I need help positioning the Octocat image on the top right corner of a NavBar:
In the Vue Snippet below, the icon is currently only visible if there is text inside the <b-nav-item>:
<template>
<div>
<b-navbar toggleable="lg" type="dark" variant="dark">
<b-navbar-brand href="#">NavBar</b-navbar-brand>
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
<b-collapse id="nav-collapse" is-nav>
<b-navbar-nav class="ml-auto">
<b-nav-item> Test </b-nav-item>
<!-- Icon not displayed -->
<b-nav-item>
<svg
class="navbar-nav-svg"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 499.36"
focusable="false"
>
<title>GitHub</title>
<path
d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242...
</path>
</svg>
</b-nav-item>
</b-navbar-nav>
</b-collapse>
</b-navbar>
</div>
</template>
<script>
export default {
name: "App",
};
</script>