在CSS上的Span ico

Question

我需要将图标从一种布局迁移到另一种布局，但遇到一些困难，

header .menu>li a span.ico {
  background-image: url ('../ img / ico / icons-arrows');
  background-repeat: no-repeat;
  background-position: -49px top;
  display: inline;
  float: left;
  height: 7px;
  margin: 7px 7px 0 0;
  overflow: hidden;
  width: 7px;
}

header .menu li a.branco span.ico {
  background-position: 0 top;
}

header .menu>li>a.azul span.ico {
  background-position: -7px top;
}

header .menu>li>a.verde span.ico {
  background-position: -14px top;
}

header .menu>li>a.amarelo span.ico {
  background-position: -21px top;
}

header .menu>li>a.laranja span.ico {
  background-position: -28px top;
}

header .menu>li>a.vermelho span.ico {
  background-position: -35px top;
}

header .menu>li>a.rosa span.ico {
  background-position: -42px top;
}

<div class="menu">
  <div class="container">
    <div class="row">
      <nav id="menu">

        <ul>
          <li><a href="#" class="branco"><span class="ico"></span>Home</a></li>
          <li><a href="#" class="dropdown-toggle azul"><span class="ico"></span>Institucional</a>
            <!-- submenu -->

请记住，我使用的是laravel，css文件位于public / css中，图像位于/ public / img / ico。

谢谢。