Create Circular backgrounds for Font Awesome or Glyphicons icons using CSS

Last Reply 8 months ago By dharmendr

Posted 8 months ago


I have used glyphicon and font awesome icons in li (Menu Items) and over the page.

I want to show circle to background with color to icons.

i.e icon should be inside the circle.

If possible need to increase size on hover of icon.

Posted 8 months ago

Hi Waghmare,

Check the sample example.


<link rel="stylesheet" href="" />
<style type="text/css">
        transform: scale(1.5);
    <span class="fa-stack fa-lg"><i class="fa fa-circle fa-stack-2x" style="color: #c0ffc0;">
    </i><i class="fa fa-pencil fa-stack-1x"></i></span>
    <br />
    <span class="fa-stack fa-lg"><i class="fa fa-circle-thin fa-stack-2x" style="color: #40c040;">
    </i><i class="fa fa-lock fa-stack-1x"></i></span>