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

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. 
 
 
 class="nav child_menu">
                       class="parentLi">
                         ui-sref="individual">
                          Customer View
                        
                      
                       class="parentLi">
                         ui-sref="segment">
                          Segment View
                        
                      
                       class="parentLi">
                         ui-sref="merchant">
                          Merchant View
                        
                      
                       class="parentLi">
                         ui-sref="product">
                          Product View
                        
                      
                       class="parentLi">
                         ui-sref="dashboard">
                          Exec Dashboard
                        
                      
                    
 
 
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 