Small stack icon on big icon with font-awesome
I am trying to create a round "+" button using font-awesome. I am attaching an image of a similar button from google contacts:
I tried using the font-awesome icon stack like this:
<span class="fa-stack fa-5x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-plus fa-stack-1x fa-inverse"></i>
</span>
But this is the result:
As you can see, the plus sign is very large and bold. I would like the plus sign to be much smaller than the circle around it and shrink significantly.
I tried moving fa-5x
to the circle icon (by removing it from the span element), but that would make the whole icon small. I've tried playing with just the plus sign icon by giving it fa-1x
, but that leaves it as it is (if I bet fa-5x
it makes it much larger than the circle).
Can't you achieve what I am trying to do?
source to share
I wouldn't even use FontAwesome for this. You can do this with one element and some CSS, and it will give you more control over the size of each individual element.
This method uses CSS Psuedo Elements, which you can read here and here . They allow you to create shapes and styles that don't exist in markup.
This is what I came up with:
body
{
padding: 50px; /* For this demo only */
}
.circle
{
display: block;
background: #3498db;
width: 120px; /* Can be any size you want */
height: 120px; /* Can be any size you want */
border-radius: 50%; /* Makes the div a circle */
position: relative; /* Allows you to position the pseudo elements */
}
.circle:before, .circle:after
{
display: block;
content: "";
position: absolute;
border-radius: 2px;
background: #fff;
}
.circle:before
{
width: 4px;
height: 32px;
top: calc(50% - 16px); /* 16px = half of the height */
left: calc(50% - 2px); /* 2px = half of the width */
}
.circle:after
{
width: 32px;
height: 4px;
top: calc(50% - 2px); /* 2px = half of the height */
left: calc(50% - 16px); /* 16px = half of the width */
}
<div class="circle"></div>
source to share