Xin các pro vxf giúp

Hiện tại mình có một điều cần các bạn giúp. mnog sp mình




Như hình trên. Mình muốn các mục trên của mình đổi thành icon cho nó gọn lại
Với cái Tìm kiếm khi kích vào thì nó mới hiện ra khung tìm kiếm. còn mấy cái dòng text hiên jtại của mình như Admin,Hộp Thư, Thông báo thì đổi thành icon . Cái Admin đổi thành có hình nhỏ nhỏ


Ai biết đổi lại ntn giúp đỡ mình tí .thanks

link để các bạn test www.1doi1.com

 

Up cho bạn

 

trang home đẹp đó bạn

 

có ai giúp mình làm cái khung tìm kiếm nó chỉ còn lại thành cái hình nhỏ nhỏ giống trên không

 

thử code này bạn ơi

HTML:

  <div id="searchBar" class="pageWidth">
  
   <fieldset id="QuickSearch">
     <form action="search/search" method="post">
      
       <div class="primaryControls">
         <!-- block: primaryControls -->
         <input name="keywords" value="" class="textCtrl" placeholder="" results="0" title="Enter your search and hit enter" id="QuickSearchQuery" type="text">        
         <!-- end block: primaryControls -->
       </div>
      
       <input name="_xfToken" value="6337,1413131859,702dc4ee03e260e07236bf1122db93b2da490a2e" type="hidden">
     </form>    
   </fieldset>
  
</div>
<script type="text/javascript">
$(document).ready(function(){
   $('#QuickSearch').click(function(){
     $('#QuickSearch .textCtrl').animate({
       width: "150px",
       padding: "3px 5px"
     }, 500);
    
     if (screen.width <= 480) {
      $( "#searchBar" ).css("float", "none");
      }
   });
   $(XenForo._isWebkitMobile ? document.body.children : document).on('click', function(clickEvent)
   {
     if (!$(clickEvent.target).closest('#QuickSearch').length)
     {
       $('#QuickSearch .textCtrl').animate({
         width: "0px",
         padding: "3px 0"
       }, 300);
        $( "#searchBar" ).css("float", "left");
     }
   });
  
  
  
});
</script>

 

tham khảo bài này xem
vxf.vn/resources/user-inbox-alert-icon-replacement.721/