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>
<li>
actual?