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.

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