时间戳

首页 > 解决方案 > 跨度 ico 在 css

html - 跨度 ico 在 css

问题描述

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

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 中。

提前致谢。

标签： htmlcsslaravel

解决方案

推荐阅读