Font-awesome: Icon request: fa-twitter-circle, fa-facebook-circle (circle social icons)

[jhoffmcd]

I've had a few instances where the design of a site calls for and repetition of circular shapes, including the look of social media links.

You see this all the time in image based icon sets, it would be nice to see if in Font-Awesome as well.

fa-facebook-circle would be just like fa-facebook-square, just circular.

Here is an image of an icon set that is similar.

I know some logo's probably won't translate due to size, but i can see a few working.

[tagliala]

you could achieve this with icon-stacking or pure css

[pakimin]

Solution

I agree.
Use Pure css, with border-radius and a fixed width and height.

For example:

.social [class*="fa fa-"] {
    background-color: #333;
    border-radius: 30px;
    color: #fff;
    display: inline-block;
    height: 30px;
    line-height: 30px;
    margin: auto 3px;
    width: 30px;
    font-size: 15px;
    text-align: center;
}

to make it colorize when hovered, for example the twitter icon:

.fa-twitter:hover { 
    background-color: #46c0fb; 
}

You're HTML should look like...

<div class="social">
  <a class="fa fa-twitter" title="" target="_blank" href="#"></a>
  <a class="fa fa-facebook" title="" target="_blank" href="#"></a>
</div>

[jhoffmcd]

@pakimin thanks! I'll keep this handy for future projects.

[ivanporras]

thank you so much

[gopalkumar315]

thanks a lot man

[kksrini89]

@pakimin Really awesome. Thanks

[leepettijohn]

I agree CSS can assist. The only issue is when you want the symbol to be transparent.

[rahulsemwal]

Thanks @pakimin

[rajgthub]

hfhoafa

[afayes]

I wish there was a way to vote for this issue. I came here because I googled for font awesome circular face book icon. I am not a designer but a backend developer. While the above CSS may do the job, it is definitely much easier to have it natively supported out of the box.

[pakimin]

@afayes Well you can combine the needed icon with icon fa-circle..
then you need to set both :before and :after and play with the font-sizes to fit. But then again, you need to use positioning with absolute and a lot of more work to do.

Frontend and Backend developers always have something to argue, but at the end they always need each other.

[afayes]

@pakimin there are solutions like yours that would work. But like you mentioned in your example there is 'a lot of more work to do'. I see this issue as a feature request that will allow users to easily use social icons with a circle out of the box. Based on a google search there seems to be a demand for it. Every owner of a framework wants to make things as easy as possible for their users. By implementing features in demand, font awesome is listening to their users needs.