Font Awesome 4.0.3 -circle not working

Profile picture for W3bGuy
W3bGuy

I am trying to use Font Awesome 4.0.3 with the -circle and -o tags and my icons disappear each time.

I am using it like so: <i class="fa fa-twitter-circle-o fa-2x"></i>

I don't get a blank square or anything else of the sorts; just a blank.

This works: <i class="fa fa-twitter fa-2x"></i>

Shouldn't the first work according to their new naming conventions?

*** EDIT ***

To elaborate a bit, I know I can stack them like you could in 3x, so for the time being, I have the following (since the circle is so thick):

<!-- language: lang-html --> 
<span class="fa-stack fa-lg">
    <i class="fa fa-square-o fa-stack-2x"></i>
    <i class="fa fa-twitter fa-stack-1x"></i>
</span>

Maybe I am misinterpreting the docs on the FA site, but I read it as the other should work.

You're right to think that Based on the Font Awesome naming conventions, what you're trying to do ought to work:

Ironically, their impetus for changing the naming convention was:

A desire for better icon naming consistency and predictability

However, they have not done a good job at documenting which symbol variants are available.

Notice fa-check-circle works, but fa-twitter-circle doesn't.

If you <kbd>Ctrl</kbd>+<kbd>F</kbd> for "circle" right on their CSS source, you'll notice that only the following symbols have a circle version:

  • Play*
  • Plus*
  • Minus
  • Times*
  • Check*
  • Question
  • Info
  • Crosshairs
  • Exclamation
  • Arrow*
  • Dot
  • Chevron*

*(some variants included as well)

If you put in anything else, it will just become a random jarble of characters as far as the CSS is concerned. It does not meet anyone of their predefined classes, so it won't treat it as anything special; which is why you lose the icon when you try to add the circle.

The alternative already proposed is to use fa-stack to manually combine a circle and a circle and a bird. Since the circle seems a little thick, instead of inverting the bird with -o, you can invert the circle with .fa-inverse like this:

<!-- language: lang-html --> 
<span class="fa-stack fa-lg">
    <i class="fa fa-circle fa-stack-2x"></i>
    <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span>

Here's a Demo of the stacked option and every available circle icon.

Here's a screnshot of what the demo looks like:

screenshot