How to put an icon in a square or a circle with Font Awsome

on
First, we need font awsome css file. You can download Font Awsome package, copy the entire font-awesomedirectory into your project, then, in the <head> of your html, reference the location to your font-awesome.min.css.

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
or you can use the following CDN

https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

In this case, all you need is to include the following line in the <head> section of your html document:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

 We use the fa-stack class on the parent, to stack multiple icons,the fa-stack-1x for the regularly sized icon, and fa-stack-2x for the larger icon. fa-inverse can be used as an alternative icon color. You can even throw larger icon classes on the parent to get further control of sizing.

<span class="fa-stack fa-lg">
  <i class="fa fa-square-o fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x"></i>
</span>

Comments

Post a Comment