How to use menu Icons instead of name while screen is small

Question

Hi,

Couls you please help me to use menu icons instead of menu name while screen size is small. 

I have written the below code but in this case when I minimize or trying to see in mobile view then all menus i.e. customer view, segment view etc slide right as attched in screenshot

 

 

But I want that in this scenario, icons should come not the menu name. 

 

 

<ul class="nav child_menu">

<li class="parentLi">

<a ui-sref="individual">

<span>Customer View</span>

</a>

</li>

<li class="parentLi">

<a ui-sref="segment">

<span>Segment View</span>

</a>

</li>

<li class="parentLi">

<a ui-sref="merchant">

<span>Merchant View</span>

</a>

</li>

<li class="parentLi">

<a ui-sref="product">

<span>Product View</span>

</a>

</li>

<li class="parentLi">

<a ui-sref="dashboard">

<span>Exec Dashboard</span>

</a>

</li>

</ul>

 

 

For small size CSS is as below:

.nav-sm ul.nav.child_menu {

background: #3e5367 none repeat scroll 0 0;

display: none;

left: 100%;

position: absolute;

top: 0;

width: 210px;

z-index: 4000;

}

 

Please advise.

 

Thanks in advance