html - 如何创建带有图像和标签(HTML 和 CSS)的菜单？

Question

我遇到了一个小问题，我试图制作一个菜单，将元素与图像和其他元素与标签结合起来，如附图所示，但它不起作用。

下一张图片显示了它目前的样子。有错误。

我试过这段代码，但我的“图片项”不在“标签项”旁边:

.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>

我该如何解决这个问题？

Answer 1

更好的解决方案应该是使用伪元素

:before

例子:

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>

您也可以使用图像 url 作为内容，但使用图标应该更好。以 fontAwesome 为例。