Create Circular backgrounds for Font Awesome or Glyphicons icons using CSS

Last Reply 8 months ago By dharmendr

Posted 8 months ago

Hiii,

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.

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<style type="text/css">
    .fa-stack:hover
    {
        transform: scale(1.5);
    }
</style>
<div>
    <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>
</div>

Demo