How to create a menu with images and labels (HTML and CSS)? - html

Question

I'm having a little problem, I was trying to make a menu combining items with image and other items with labels, as in the attached image, but it doesn''t work.
Next image shows how it is currently. With error.
I've tried with this code, but my "picture item" don't stand next to the "label item":
.sprite-icons {
background: url(../images/icons/sprite-icons_menu.png) no-repeat top left;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
width: 33px; height: 30px;
}
.sprite-icons.icon_home {
background-position: 0px 0px;
}
.icon_home:hover{
background-position: -48px 0px;
}
.sprite-icons.icon_home_active {
background-position: -48px 0px;
}
.sf-menu{
border-bottom: 1px solid black;
list-style-type:none;
line-height: 1.0;
text-align: center;
padding: 10px 10px 8px 10px;
float: left;
width: 99%;
}
.sf-menu a{
text-decoration: none;
color: #606060;
-webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; -moz-transition: all 0.3s ease;
}
.sf-menu a:hover{
color: #ffffff;
background-color: #ee1c24;
padding: 10px 6px 6px 6px;
}
.sf-menu li{
display: inline;
padding: 20px;
}
<nav>
<ul class="sf-menu">
<li><a href="" title="Home">
<div class="sprite-icons icon_home">
</div></a>
</li>
<li>A EMPRESA</li>
<li>SERVIÇOS</li>
<li>SISTEMA</li>
<li>TRABALHE CONOSCO</li>
<li>CONTATO</li>
</ul>
</nav>
How can I solve this?

Answer 1

Better solution should be use pseudo-element
:before
Example:
ul li
{
display: inline-block;
}
.icon-tutti:before {
content: "\e908";
}
span [class^=icon-] {
font-size: 1.3em;
margin-right: 10px;
color: #ff653e;
}
<ul>
<li><span class="icon-tutti"></span></li>
<li>Second Element</li>
<li>Third Element</li>
</ul>
You can also use an image url as content, but using icons should be better. Try fontAwesome for example.