Create Circular backgrounds for Font Awesome or Glyphicons icons using CSS

Last Reply 10 months ago By dharmendr

Posted 10 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.

You are viewing reply posted by: dharmendr 10 months ago.
Posted 10 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>