Add background color to Font Awesome icons[Circle & Square]

Font awesome has inbuilt method of adding circle and background color to its icons. Font awesome uses the idea of icon stacking(putting one icon ontop of another one.

To start off you need to add font awesome CDN link or download the files. {add link code here}

1. add circle background to font awesome icon

You need the code for the circle and the brand icon you will be using. In my case circle- fa-circle and Github - fab-github.

Code example:

<span class="fa-stack fa-2x">
  <i class="fas fa-circle fa-stack-2x"></i>
  <i class="fas fab-github fa-stack-1x"></i>
</span>

2. Add square background to font awesome icons

You need the code for the square and the brand icon you will be using. In my case circle- fa-circle and Github - fa-twitter.

Code example:

<span class="fa-stack fa-2x">
  <i class="fas fa-circle fa-stack-2x"></i>
  <i class="fas fa-twitter fa-stack-1x"></i>
</span>

3. Change the size of font awesome icons with background color

You can make the icons together with their backgrounds bigger by replacing the fa-2x class with a bigger value like fa-3x.

Code example:

<span class="fa-stack fa-3x">
  <i class="fas fa-circle fa-stack-2x"></i>
  <i class="fas fa-twitter fa-stack-1x"></i>
</span>

To make the icons and their background smaller, replace the fa-2x class with a smaller values like fa-1x.

Code example:

<span class="fa-stack fa-1x">
  <i class="fas fa-circle fa-stack-2x"></i>
  <i class="fas fa-twitter fa-stack-1x"></i>
</span>