JSFiddle - React, Tailwind, and code Playground
HTML
<!-- <ul id="contacts">
<li><span class="cone home"></span> Home</li>
<li><span class="cone phone"></span>Phone</li>
<li><span class="cone location"></span>Location</li>
<li><span class="cone send"></span>Send email</li>
<li><span class="cone plus"></span>Add user</li>
<li><span class="cone minus"></span>Delet user</li>
<li><span class="cone arrowR"></span>Arrow Right</li>
<li><span class="cone arrowL"></span>Arrow Left</li>
<li><span class="cone arrowU"></span>Arrow Up</li>
<li><span class="cone arrowD"></span>Arrow down</li>
<li>
<div id='skin'>trig</div>
</li>
</ul>
-->
<div id="info">
<h3>TOO Cleaning</h3>
<span class="cone home"></span>На главную
<br> <span class="cone location"></span>Наш адрес, ул.Мамышулы дом 77/21 <br>
<span class="cone phone"></span> Телефон: 8 705 272 15 45
<br> <span class="cone send"></span>Наш електронный адрес: [email protected]
</div>
CSS
* {
margin:0;
padding:0;
}
body {
font-family:Calibri;
font-size:12px;
}
ul#contacts {
font-family:Calibri;
font-size:12px;
color:#999;
line-height:50px;
list-style:none inside;
width:300px;
border-top:1px solid #f4f4f4;
}
#contacts li {
clear:both;
position:relative;
border:1px solid #f4f4f4;
border-top:none;
}
.cone {
float:left;
height:35px;
width:40px;
background: url('http://s27.postimg.org/wxqjchn2b/icons_6.png') no-repeat center;
}
#info {
line-height:35px;
width:300px;
color:#666;
}
/* http://s10.postimg.org/bmilsp861/ico.jpg */
.home {
background-position: 0;
}
.phone {
background-position: -40px;
}
.location {
background-position: -80px;
}
.send {
background-position: -120px;
}
.plus {
background-position: -160px;
}
.minus {
background-position: -200px;
}
.arrowR {
background-position: -240px;
}
.arrowL {
background-position: -280px;
}
.arrowU {
background-position: -320px;
}
.arrowD {
background-position: -360px;
}
JavaScript
$('#skin').click(function () {
$('.cone').css('backgroundImage', 'url(http://s10.postimg.org/bmilsp861/ico.jpg)');
});