Chankya
  • Introduction
  • Getting Started
  • Start Building
  • Layouts
  • Seed Project
  • Style Customisation
  • Third Party Modules
  • UI Elements
    • Buttons
    • Progress Bar
    • Tabs
    • Accordions
    • Pagination
    • Tooltip
    • Cards
    • Social Icons
    • Typography
    • Drop down
    • Alerts
    • Carousel
    • Date picker
    • Slider
  • Components
    • List
    • Grid
  • Contact Us
    • Hire Us
  • Changelog
Powered by GitBook
On this page

Was this helpful?

  1. UI Elements

Social Icons

We have replaced Bootstrap's default font icon Glyhpicons, with the Font Awesome and have created a few additional classes.

Please see the following examples where the icons are used along with some of the utility classes.

<!--Facebook-->
<button type="button" class="btn btn-fb mb-2 mr-2 btn-square"><i class="fa fa-facebook left"></i> Facebook</button>
<!--Twitter-->
<button type="button" class="btn btn-tw mb-2 mr-2 btn-square"><i class="fa fa-twitter left"></i> Twitter</button>
<!--Google +-->
<button type="button" class="btn btn-gplus mb-2 mr-2 btn-square"><i class="fa fa-google-plus left"></i> Google +</button>
<!--Linkedin-->
<button type="button" class="btn btn-li mb-2 mr-2 btn-square"><i class="fa fa-linkedin left"></i> Linkedin</button>
<!--Instagram-->
<button type="button" class="btn btn-ins mb-2 mr-2 btn-square"><i class="fa fa-instagram left"></i> Instagram</button>
<!--Pinterest-->
<button type="button" class="btn btn-pin mb-2 mr-2 btn-square"><i class="fa fa-pinterest left"></i> Pinterest</button>
<!--Youtube-->
<button type="button" class="btn btn-yt mb-2 mr-2 btn-square"><i class="fa fa-youtube left"></i> Youtube</button>
<!--Vkontakte-->
<button type="button" class="btn btn-vk mb-2 mr-2 btn-square"><i class="fa fa-vk left"></i> Vkontakte</button>
<!--Stack Overflow-->
<button type="button" class="btn btn-so mb-2 mr-2 btn-square"><i class="fa fa-stack-overflow left"></i> Stack Overflow</button>
<!--Slack-->
<button type="button" class="btn btn-slack mb-2 mr-2 btn-square"><i class="fa fa-slack left"></i> Slack</button>
<!--Github-->
<button type="button" class="btn btn-git mb-2 mr-2 btn-square"><i class="fa fa-github left"></i> Github</button>
<!--Comments-->
<button type="button" class="btn btn-comm mb-2 mr-2 btn-square"><i class="fa fa-comments left"></i> Comments</button>
<!--Email-->
<button type="button" class="btn btn-email mb-2 mr-2 btn-square"><i class="fa fa-envelope left"></i> Email</button>
<!--Dribbble-->
<button type="button" class="btn btn-dribbble mb-2 mr-2 btn-square"><i class="fa fa-dribbble left"></i> Dribbble</button>
PreviousCardsNextTypography

Last updated 6 years ago

Was this helpful?