CODEWITHSUNDEEP
htmlcssimagemenulabel
Gabriel Magalhães
Gabriel Magalhães

Reputation: 39

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

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.

How it should stay.

Next image shows how it is currently. With error.

How it is currently

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 href="">A EMPRESA</a></li>
    <li><a href="">SERVIÇOS</a></li>
    <li><a href="">SISTEMA</a></li>
    <li><a href="">TRABALHE CONOSCO</a></li>
    <li><a href="">CONTATO</a></li>
  </ul>
</nav>

How can I solve this?

Upvotes: 0

Views: 2852

Answers (1)

Federica Venuto
Federica Venuto

Reputation: 582

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><a href="#"><span class="icon-tutti"></span></a></li>
        <li><a href="#">Second Element</a></li>            
        <li><a href="#">Third Element</a></li>

</ul>

You can also use an image url as content, but using icons should be better. Try fontAwesome for example.

Upvotes: 1

Related Questions