You're right to think that Based on the [Font Awesome naming conventions][New Naming], 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][font-awesome.css], 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`][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:



    <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][jsFiddle]**.

Here's a screnshot of what the demo looks like:

![screenshot][screenshot]

[New Naming]: http://fortawesome.github.io/Font-Awesome/whats-new/#new-naming
[fa-stack]: http://fortawesome.github.io/Font-Awesome/examples/#stacked
[font-awesome.css]: https://github.com/FortAwesome/Font-Awesome/blob/master/css/font-awesome.css
[jsFiddle]: http://jsfiddle.net/KyleMit/qfMdP/
[screenshot]: http://i.imgur.com/ZGq3J2E.png

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][1]?

*** 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):



    <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.


  [1]: http://fortawesome.github.io/Font-Awesome/whats-new/

Font Awesome 4.0.3 -circle not working

Using [bootstrap's native validation states][validation states] is probably preferable to writing custom CSS here.  
<sup>[And I'm pretty sure that I'm the one who came up with the CSS in question][my answer].</sup>

Just use `.has-feedback` on your form-group and `.form-control-feedback` on your icon:



    <div class="form-group has-feedback">
        <label class="control-label sr-only">DatePicker</label>
        <input type="text" class="form-control date-picker" /> 
        <i class="fa fa-calendar form-control-feedback"></i>
    </div>

### [Demo in jsFiddle][fiddle]

[![screenshot][screenshot]][fiddle-show]



[validation states]: http://getbootstrap.com/css/#forms-control-validation

[fiddle]: http://jsfiddle.net/KyleMit/cyCFS/927/
[fiddle-show]: http://jsfiddle.net/KyleMit/cyCFS/927/show

[screenshot]: http://i.imgur.com/WTh8dUu.png
[my answer]: https://stackoverflow.com/revisions/18839305/5

I am working in Bootstrap 3 and am trying to get a calendar icon inside the right hand side of the input box. 

My html looks like this:

    <div class="col-md-12">
        <div class='right-inner-addon col-md-2 date datepicker' 
             data-date-format="yyyy-mm-dd">
            <input name='name' value="" type="text" class="form-control date-picker"
                   data-date-format="yyyy-mm-dd"/>
            <i class="fa fa-calendar"></i>
        </div>
    </div>

I have tried `position: absolute` like this:



    .right-inner-addon i {
        position: absolute;
        right: 5px;
        top: 10px;
        pointer-events: none;
        font-size: 1.5em;
    }
    .right-inner-addon {
        position: relative;
    }

But when I do it will look great in one spot, but will not be positioned correctly in another instance.

I have also tried to see if I could use `text-indent` to see if this would work throughout, but it had the same effect.



    .right-inner-addon i, 
    .form-group .right-inner-addon i {
    	display: inline-block;
    	z-index: 3;
    	text-indent: -15px;
    	font-size: 1.3em;
    }

[**Here's a jsFiddle that might help**](http://jsfiddle.net/ztS4t/)

Bootstrap 3 Placing Icon inside input field

Font Awesome appears to be working fine - it's your markup that's problematic.


1. When you have a fixed top navbar, you need to push the contents down by at least 50 pixels, not by 10 - so the `.fa-camera-retro` is being hidden by the navbar

    *Use this*:

    
        
        body { margin-top: 60px; }
    
    *Instead of this*:

    
        
        body { margin: 10px; }

2. If you replace the FA icon in the navbar-right, with just plain text, you'll notice that doesn't show up either - for bootstrap styles to take affect in the navbar, they need to be in an `a` tag.

    *Use this*:

    
        
        <li class="active"><a href=""><i class="fa fa-user"></i></a></li>
    
    *Instead of this*:

    
        
        <li class="active"><i class="fa fa-user"></i></li>


###[Working Demo in Fiddle](https://jsfiddle.net/KyleMit/jjjesyvt/11/)

I created a JSFiddle trying to show a problem I'm having with FontAwesome and it seems Font Awesome is not working at all in JSFiddle when I add Bootstrap. Here's the example:

https://jsfiddle.net/pupeno/jjjesyvt/

The code is very simple:

    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Bootstrap 3</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="http://getbootstrap.com/css">Left</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li class="active"> <i class="fa fa-user"></i> </li>
            </ul>
        </div>
     </nav>
    
    <i class="fa fa-camera-retro"></i>

Why is Font Awesome not working with Bootstrap in JSFiddle?

You can change the color for all .fa icons inside anchor tags

```css
a .fa {
    color: black;
}
```

### Demo in Stack Snippets





    a .fa {
      color: black;
    }



    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>

    <a href="https://www.w3schools.com"><i class="fa fa-facebook"></i></a>

I just added a href tag to my font awesome icon, which alters its color like so:

[![enter image description here][1]][1]


  [1]: https://i.stack.imgur.com/JDbZ0.png

Is there a way to remove this link color?

    <a href="https://www.w3schools.com"><i class="fa fa-facebook"></i></a>

