How to add icons to list items for the menu?

Question

1.00/5 (1 vote)

See more:

Hi everyone!

Im trying to build a menu for my website and I'm having a problem putting the icon next to the list item (menu option) without it interfering with other list items..

HTML CODE

HTML

<!DOCTYPE html PUBLIC>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <link rel="stylesheet" type="text/css" href="stylesheet.css">
    <title> Indie</title>
  </head>
  
<body>
  
  <div class="sectionone">
    <ul class="horizontalmenu">
      <li data-type="home"><a href="#">Home</a></li>
      <li data-type="hot"><a href="#">Hot</a></li>
      <li data-type="featured"><a href="#">Featured</a></li>
      <li data-type="toprated"><a href="#">Top Rated</a></li>
      <li data-type="newlyadded"><a href="#">Newly Added</a></li>
      <li data-type="submitindie"><a href="#">Submit Indie</a></li>
      <li data-type="rankings"><a href="#">Rankings</a></li>
    </ul>
  </div>
  
  
  
  <div class="sectiontwo">
    <center><img class="logo" src="http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons/magic-marker-icons-arrows/114907-magic-marker-icon-arrows-triangle-solid-up.png" width="200"></center>
    

    Username: <input class="textinput" type="text" name="url"/>
    Password:  <input class="textinput" type="text" name="url"/>
    <br/><br/>
   
    What is the color of six?
    <br/>
    <br/>
    <form>
   <fieldset>
    <legend> Choose Carefully </legend>
    <p><label> <input type=radio name=size> Red </label></p>
    <p><label> <input type=radio name=size> Gold </label></p>
    <p><label> <input type=radio name=size> No Color </label></p>
   </fieldset>
     
    <button id="submitq" type='submit'> Login 
  </div>
    
  <div class="sectionthree">

  </div>
      
    
    
    
</body>
    
    
    
  

  
  
  
  
  
  
  
  
  
  
  
</html>

CSS

body {
  margin: 0;
  padding: 0;
  width:  100%;
  text-align: center;
  background-image:  url(http://www.macwallhd.com/wp-content/Wallpapers/20120625/Apple%20Mac%20Android%20Emulator%20For%20Your%20Computer-2120152447.jpeg);
  color: #939393;
  
}

.sectionone {
   width: auto;
    height: 30px;
    border-style: double;
    border-top: 0;
    background-color: black;
    margin-bottom: 10px;
    
}

.horizontalmenu {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.horizontalmenu li a {
    font-size: 12px;
    font-family: Tahoma, Geneva, sans-serif;
    font-weight: lighter;
    color: white;
    display: inline;
    float:left;
    margin: 5px 5px 15px 9%;
}

li[data-type="home"] {
  list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAACnklEQVQ4EXVSW0hUYRCemXNW0kpQWKMEKyPKoCeVKOh+eUgQLHuQXkpKsXpQMFd98qXLakkJsWQU3aieylxKiKDt8pCW1UMsCpkZWK33LSTxnPNP8x88y2I1cM7MznzznX+//0P4T9S0Hki11Mxy5ShMI+vruZNPpv8FxfnNY8Gi7UwqwA5sQaBvbACDo7KJ6LX0W0K1XV3JOwmCpqYmGknraRX4PsXGKSL+LcA8REZU2G+bjKCgQfheWumxyvbKXksTmR5bLLX7PDAVyJdqie02AFqiZ8zyIINhwQQT1iiGMt/PrCsyOqTnpF9VzUWbGakUEC46bN/1lvXMCybIFKobsnBPKdpYFSwq1jOXAADrUPFZBnWBgOZ6AP6MpbBy2VqPw802awycRoKAbmDF5XyfGc+aAjYqAPm2hy7I2wple05AipkC9yPXINLbKfLI/9GBWKGAW9GGHJMm/Nly9El5VrszKXYWlkDJtnIXq1+lO45CRrofHkSuiiYM6PB6Yv7MPswl0/ShEsk9tP7K4Pc+72cij8d/uMu6IVeLbEpyRLnY9IJhApUpzJ8S6KQieLMaeqLPkjq65I9yjlXisQEjGok6hbvWbDIJhhwF+YiwiEQhy7ZgYDgKfUPvwbZnYWRyGCZ/jentOCgOI3BOqP7xJdcHcpAWh51bJlG1Dc6d8XiMHr64rsFuvOt/5ZVALF4go5EZ63XTvbJQXfi5GK5DgaoCpIMKYDSxMVc4Sk3J0Q+L+vslvwkFwh16lHCif6awejTtbZuoe0YuokEU0xKtQxb/GRA1lGELvlEM1TM2nXpkjleg8+J4cO9ucX8DgNog1/PFJjG4ghWC/CDQ5lDgUWfyyl8E3rA8WLx4IatchxTaanawvf5p3Jsl5z9iERtr3B+9XgAAAABJRU5ErkJggg==) ;
  padding-left: 30px;
    
}


.sectiontwo {
  border-style: double;
  font-size: 12px;
  font-family: Tahoma, Geneva, sans-serif;
  font-weight: lighter;
  padding: 25px 25px 25px 25px;
  width: 20%;
  background-image: url("http://deadpanpictures.ie/dpp/wp-content/uploads/2014/09/tumblr_static_texture-pattern-black-background-wallpaper1.jpg")
  
}

.sectionthree {
  border-style: double;
  font-size: 12px;
  font-family: Tahoma, Geneva, sans-serif;
  font-weight: lighter;
  float: left;
  padding: 25px 25px 25px 1240px;
  margin-top: 10px;
}

.logo {
  border: 1px solid white;
  border-radius: 5px;
  margin: 3%;
  padding: 2%;
  background-color: white;
  width: 20px;
}

.textinput {
  border-style: double;
  color: grey;
  width: 120px;
  margin: 10px;
}

.textinput :hover {
	color: #008000;
	background: #FFF;
	padding:0 5px 0 5px;
}

fieldset {
  color: white;
  border-style: dotted;
}

#submitq {
  border-style: double;
  color: #F0F8FF;
  margin: 10px;
 
}

I appreciate the input from all of you :)

Updated - Added 1 icon to the first list item. But it unaligned the other list items.

Posted 11-Jul-15 15:33pm

thelastofC0de

Updated 11-Jul-15 18:27pm

v2

Add a Solution

Comments

Sergey Alexandrovich Kryukov 11-Jul-15 23:08pm

They are not "icons", but images, bitmaps, such as JPEG or PNG...
What's the problem? You can always use img element as a child of other elements...
—SA

thelastofC0de 12-Jul-15 0:25am

Im not sure how to do that.. when i have added the updated code with icon by the "Home" list item. But when I do this the other list items become unaligned...

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Azziet · Answer 1 · 2015-07-12T22:36:00

Problem in your css code thats why it is unaligning the other list, just change as below in your css - instead of only anchor css

CSS

.horizontalmenu li a {
    font-size: 12px;
    font-family: Tahoma, Geneva, sans-serif;
    font-weight: lighter;
    color: white;
}
.horizontalmenu li {
    float: left;
    margin: 5px 5px 10px 9%;
}