Having trouble inserting an image into my Bootstrap navbar, only the alt text is showing up. Does anyone have a solution for this? Bootstrap Version: CDN Version 5.0 Beta
Screenshots: https://i.sstatic.net/vBNYp.png
https://i.sstatic.net/v8lwu.png https://i.sstatic.net/U9gOa.png
Code:
.nav-link{
color:chartreuse;
font-family: 'DotGothic16', sans-serif;
}
.navbar-brand{
color: darkviolet;
}
.nav-item:hover{
color: chocolate;
}
.navbar-brand:hover{
color:tomato;
}
.navbar{
position: sticky;
}
#brand{
width: 40px;
}
#home{
position:relative;
top:-10px;
}
nav{
height: 50px;
}<nav class="navbar navbar-expand-sm bg-dark">
<!-- Links -->
<ul class="navbar-nav">
<li class="navbar-brand">
<a class="nav-link" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32w" fill="currentColor" id="home"
class="bi bi-house-door" viewBox="0 0 16 16">
<path
d="M8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4.5a.5.5 0 0 0 .5-.5v-4h2v4a.5.5 0 0 0 .5.5H14a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146zM2.5 14V7.707l5.5-5.5 5.5 5.5V14H10v-4a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v4H2.5z" />
</svg>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Link 1
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Link 2
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Link 3
</a>
</li>
</ul>
</nav>I attempted to use imgur.com to host the image (Here is the Imgur Image.) but it didn't work. However, when I used an icon in SVG format from Bootstrap Icons, it worked!
I checked the console window in my browser and the image path was correct. I also tried resizing the image, thinking that might be the issue, but Bootstrap typically resizes images automatically. I even tried a different browser.
Here is the edit I wanted to provide :D