How to add image beside button - html

Question

I have a hover dropdown menu and the image wont in the main button else when it fits the dropdown looks weird. When i hover over the user12345 button the image is on the left side just before the hover shadow. I have attached the codes including the dropdown nav codes in the snippet below. Thank you so much for your help
HTML:
body {
font-family: arial;
margin: 0;
padding: 0;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
}
.dropdown {
margin: 0 auto;
}
nav {
height: 77px;
text-decoration:none;
}
ul {
padding: 0;
margin: 0 auto;
float: right;
margin-right:30px;
}
ul li {
position: relative;
list-style: none;
display: inline-block;
background: #343a40;
}
ul li a {
display: block;
padding: 0 15px;
color: #D3D3D3;
text-decoration: none;
line-height: 60px;
font-size: 20px;
}
ul li a:hover {
background: #3b4044;
text-decoration:none;
opacity: 1 !important;
}
ul ul {
position: absolute;
top: 62px;
display: none;
background: #343a40;
}
li:hover ul {
display: block;
text-decoration:none;
background: #343a40 !important;
}
h5 {
margin-bottom: .5rem;
font-family: inherit;
line-height: 1.2;
}
b{
font-weight: 542;
}
ul li:hover > ul {
display: block;
}
ul ul li {
width:150px;
float: none;
display: list-item;
position: relative;
}
.user {
margin-left: 20px; }
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<div class="dropdown ">
<nav class="navbar navbar-expand-md bg-dark navbar-dark py-3">
<a id="name" href="index.html">
<img src="images/headericon.png" width="40" height="40" class="d-inline-block align-top" alt="">
</a>
<h5 style="font-size: 22px" class="ml-2 text-info mt-2"><b>Gobble</b></h5>
<ul>
<img src="images/noprofile.png" class="user " style="width:48px;height:48px">
<li> User12345
<ul>
<li>Profile</li>
</ul>
</nav> </div>

Answer 1

Can you check below solution, hope it will resolve your issue.
body {
font-family: arial;
margin: 0;
padding: 0;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
}
.dropdown {
margin: 0 auto;
}
nav {
height: 77px;
text-decoration:none;
}
.dropdown ul {
margin:0;
padding: 0;
margin: 0 auto;
float: right;
margin-right:30px;
}
ul li {
position: relative;
list-style: none;
display: inline-block;
background: #343a40;
}
ul li a {
display: inline-block;
padding: 0 15px;
color: #D3D3D3;
text-decoration: none;
line-height: 60px;
font-size: 20px;
}
ul li a img {
margin-right: 20px;
}
ul li a:hover {
background: #3b4044;
text-decoration:none;
opacity: 1 !important;
}
ul ul {
position: absolute;
top: 62px;
display: none;
background: #343a40;
}
li:hover ul {
display: block;
text-decoration:none;
background: #343a40 !important;
}
h5 {
margin-bottom: .5rem;
font-family: inherit;
line-height: 1.2;
}
b{
font-weight: 542;
}
ul li:hover > ul {
display: block;
}
ul ul li {
width:150px;
float: none;
display: list-item;
position: relative;
}
.user {
margin-left: 20px; }
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<div class="dropdown">
<nav class="navbar navbar-expand-md bg-dark navbar-dark py-3">
<a id="name" href="index.html">
<img src="images/headericon.png" width="40" height="40" class="d-inline-block align-top" alt="">
</a>
<h5 style="font-size: 22px" class="ml-2 text-info mt-2"><b>Gobble</b></h5>
<ul>
<li>
<img src="images/noprofile.png" class="user" style="width:48px;height:48px">User12345
<ul>
<li>Profile</li>
</ul>
</li>
</ul>
</nav>
</div>

Answer 2

I hope I understand correctly what you mean.
this code can help you. you must put img tag in your a tag.
<div class="dropdown ">
<nav class="navbar navbar-expand-md bg-dark navbar-dark py-3">
<a id="name" href="index.html">
<img src="images/headericon.png" width="40" height="40" class="d-inline-block align-top" alt=""> </a>
<h5 style="font-size: 22px" class="ml-2 text-info mt-2"><b>Gobble</b></h5>
<ul>
<li><a href="#"><img src="images/noprofile.png" class="user "
style="width:48px;height:48px;"> User12345</a></li>
<ul>
<li><a href="#" class="nav-item">Profile</a
</li>
</ul>
</ul>
</nav>
</div>
you can set position:relative style for your img tag to put it correctly beside a tag.
also you can use flexbox, it's a very good tool for put elements next to each other.
you can learn about it in w3schools or css-tricks:
https://www.w3schools.com/css/css3_flexbox.asp
https://css-tricks.com/snippets/css/a-guide-to-flexbox/