How can I position font awesome icons?

Question

I am trying to position a font awesome icon - an exclamation point stacked on top of a circle - like so:

What's happening is that it looks like this:

What's New

<span class="fa-stack">
    <i class="fa fa-circle fa-stack-1x" style="color:red"></i>
    <i class="fa fa-exclamation fa-stack-1x" style="color:white"></i>
</span>

Answer 1

What's New<sup><i class="fa fa-circle fa-stack-1x" style="color:red"></i></sup> Remove space before font-awesome icon and put the code in superscript

Answer 2

.fa-stack {
    z-index: 100;
    margin-left: -20px;
}

Z-index makes sure the icon sits on top of the text. Depending on how you've build this out, you might or might not need to add it. The number just needs to be higher than the z-index of the text (100 is arbitrary).

Negative margin will move it over.

Answer 3

Use margins. In this case, I used negative margins.