CODEWITHSUNDEEP
htmlcss
Toms Eglite
Toms Eglite

Reputation: 359

How to add icon to list elements

How can I add an icon to every list element? 

        <nav class="mobile">
            <ul>
                <li><img class="icon" src="images/ico/home.png" style="width:10px; height:10px; margin: 2px; float:left;"/><a href="index.php">Home</a></li>
                <li><a href="index.php">Articles</a></li>
                <li><a href="photos.php">Photos</a></li>
                <li><a href="index.php">Services</a></li>
                <li><a href="index.php">Contacts</a></li>
            </ul>
        </nav>

I've tried this so far, but my icon is not in line with <a> element.

Upvotes: 0

Views: 11830

Answers (2)

Sorian
Sorian

Reputation: 46

It's simple, just use css in header:

<style type="text/css">
    li:id1 {
        list-style-image: url('anyimg1.gif');
    }

    li:id2{
        list-style-image: url('anyimg2.gif');
    }
</style>

And HTML:

<ul>
      <li id="id1"><a href="index.php">Home</a></li>
      <li id="id2"><a href="index.php">Articles</a></li>
</ul>

Upvotes: 1

omukiguy
omukiguy

Reputation: 1437

You can use variety of tools like font icons from font awesome or even you own custom font. Just use the pseudo class :before to the li and then add content to it.

li:before {
  content: '+';
}


li:before {
  content: '+';
}
<nav class="mobile">
  <ul>
    <li><a href="index.php">Home</a></li>
    <li><a href="index.php">Articles</a></li>
    <li><a href="photos.php">Photos</a></li>
    <li><a href="index.php">Services</a></li>
    <li><a href="index.php">Contacts</a></li>
  </ul>
</nav>

Upvotes: 3

Related Questions