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.