<!-- icon -->
<i class="fa fa-search"></i>
<!-- social icon -->
<ul class="social-icon" >
<a href="#">
<i class="ti-facebook"></i>
</a>
<a href="#">
<i class="ti-twitter-alt"></i>
</a>
<a href="#">
<i class="ti-linkedin"></i>
</a>
<a href="#">
<i class="ti-google"></i>
</a>
</ul>
<!-- social icon -->
<ul class="social-icon-alt" >
<a href="#">
<i class="ti-facebook"></i>
</a>
<a href="#">
<i class="ti-twitter-alt"></i>
</a>
<a href="#">
<i class="ti-linkedin"></i>
</a>
<a href="#">
<i class="ti-google"></i>
</a>
</ul>
Use any icon (here uses Fontawesome icon) into an <i> element
Use the icon name afterfa fa- in a class of <i>tag. For example: <i class="fa fa-search">
Add icon-xs class for extra small size icon
Add icon-sm class for small size icon
Add icon class for normal size icon
Add icon-lg class for large size icon
For social icon add an .social-icon class in <ul> tag
For alternative social icon add an .social-icon-alt class in <ul> tag