Create Circular backgrounds for Font Awesome or Glyphicons icons using CSS

Last Reply one year ago By dharmendr

Posted one year 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 one year 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