1

Hola tengo el siguiente código en el cual debo agregarle una PNG que me dio el cliente, las PNG las debo agregar a las li del menú, alguien sabe como podría hacer eso o como convertirlas a iconos?

MI CÓDIGO ACTUAL:

 
body{
   font-size:20px;
   text-align:justify;
   margin:0;
   padding:0;
}
.nav-wrapper{
  background:#ff7334;
}

.nav-content{
  background:#0D0D0D;
}

.page-footer{
  height:505px;
    background:#000000;

}

.contactoinfo{
  color:#F2F2F2;
}
.tarjetas{
  color:#fff;
}

/*En esta linea tengo error no se agrega la imagen a la lista a ninguna*/
li{
list-style-image:url(img/iconos/Baños.png);

}
<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/>
  <title>Lovi acabados</title>
    <script data-require="[email protected]" data-semver="1.3.8" src="https://code.angularjs.org/1.3.8/angular.js"></script>
    <script data-require="angular-translate@*" data-semver="2.5.0" src="https://cdn.rawgit.com/angular-translate/bower-angular-translate/2.5.0/angular-translate.js"></script>
    <script src="script.js"></script>

<!-- -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link href="css/materialize.css" type="text/css" rel="stylesheet"/>
  <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<script type="text/javascript">
  
  $('.tap-target').tapTarget('open');
  $('.tap-target').tapTarget('close');
</script>

  <body ng-controller="translateController">
<div ng-controller="translateController" class="nav-wrapper">
    <button class="color-idiomas waves-effect waves-light btn" ng-click="changeLanguage('en')">English </button>

    <button class="color-idiomas waves-effect waves-light btn" ng-click="changeLanguage('sp')">Spanish</button>

    </div>
<nav class="default" role="navigation">
    <div class="nav-wrapper">
                  <a href="#" class="brand-logo center">Lovi Acabados</a>

      <a href="#" data-activates="mobile-demo" class="button-collapse show-on-large"><i class="material-icons">menu</i></a>
      <ul class="side-nav">
          <li><a  href="producto1.html">Adoquin</a></li>
      <li><a  href="producto2.html">Azulejo</a></li>
        <li ><a  href="producto3.html">Barro</a></li>
        <li><a  href="producto4.html">Block</a></li>
        <li><a  href="producto5.html">Cantera</a></li>
        <li><a  href="producto6.html">Esculturas reducidas</a></li>
        <li><a href="producto7.html">Fuentes</a></li>
        <li><a  href="producto8.html">Granito</a></li>
        <li><a  href="producto9.html">Iluminación</a></li>
        <li><a href="producto10.html">Jacuzzi</a></li>
        <li><a  href="producto11.html">Ladrillo refractario</a></li>
        <li><a  href="producto12.html">Mármol</a></li>
        <li><a  href="producto13.html">Piedras decorativas</a></li>
        <li><a  href="producto15.html">Piso</a></li>
        <li><a  href="producto17.html">Sanitarios</a></li>
        <li><a  href="producto16.html">Tejas</a></li>      </ul>

        
      <ul class="side-nav" id="mobile-demo">
                  <li><a  href="producto1.html">Adoquin</a></li>

      <li><a  href="producto2.html">Azulejo</a></li>
        <li><a  href="producto3.html">Barro</a></li>
        <li><a  href="producto4.html">Block</a></li>
        <li><a  href="producto5.html">Cantera</a></li>
        <li><a  href="producto6.html">Esculturas reducidas</a></li>
        <li><a  href="producto7.html">Fuentes</a></li>
        <li><a  href="producto8.html">Granito</a></li>
        <li><a  href="producto9.html">Iluminación</a></li>
        <li><a href="producto10.html">Jacuzzi</a></li>
        <li><a  href="producto11.html">Ladrillo refractario</a></li>
        <li><a  href="producto12.html">Mármol</a></li>
        <li><a  href="producto13.html">Piedras decorativas</a></li>
        <li><a  href="producto15.html">Piso</a></li>
        <li><a  href="producto17.html">Sanitarios</a></li>
        <li><a  href="producto16.html">Tejas</a></li>      </ul>
      </ul>
    </div>
  </nav>

3
  • a que te refieres con añadirlos a la <li> actual? Commented el 1 jun. 2017 a las 6:29
  • perdon a este --> <li><a href="producto1.html">Adoquin</a></li>
    – simon
    Commented el 1 jun. 2017 a las 6:33
  • Quiero agregarle de fondo a ese li una imagen pero no se pone o como biñeta pero tampoco
    – simon
    Commented el 1 jun. 2017 a las 6:34

1 respuesta 1

0

li{
display: inline-block;
background-image: url(https://matematicasparaticharito.files.wordpress.com/2015/02/cuadrado.png?w=217&h=216);
}
<li>Prueba</li>

Esto funciona para mi como verás en el ejemplo, para que no se repita he puesto el inline-block

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.