Can anyone help me figure out how to place an icon and a link inside a list item?
I'm trying to add a small icon to the left of text in a navigation bar, while also making the entire bar clickable.
I've searched online for solutions but haven't found any that work.
This is what my current setup looks like:
HTML
<ul>
<li><img src="../resources/images/test.png" /><a href="#text">Login</a></li>
<li><a href="#test">Test1</a></li>
<li><a href="#test">Test2</a></li>
<li><a href="#test">Test3</a></li>
<li><a href="#test">Test4</a></li>
</ul>
CSS
ul {
list-style-type: none;
height: 40px;
width: auto;
padding: 0;
margin: 0;
}
li a {
margin-right: 50px;
background: #B0AA9A;
float: left;
height: 30px;
width: 150px;
font-size: 25px;
color: #454138;
font-family: helvetica, sans-serif;
text-decoration: none;
}
img {
height: 20px;
width: 20px;
float: left
}