You'll need to add `position: relative` to your parent wrapper



 #wrapper {
 max-width:800px;
 position: relative;
 }


The following fiddle illustrates the difference between relative and absolute positioning:

[**jsFiddle**][fiddle]
====

See [Absolute Positioning Inside Relative Positioning][article] from CSS-Tricks for more info.


[article]: http://css-tricks.com/absolute-positioning-inside-relative-positioning/
[fiddle]: http://jsfiddle.net/KyleMit/pFeYa/

I understand that max-width has been very well documented, but I am still having trouble making my website stop stretching at a certain point. When the user stretches the browser more than 800 px, I want my website to stop stretching. (All my divs and everything are done in %'s, not px's.) I created a wrapper,



 #wrapper{
 max-width:800px;
 }

However, because my divs are absolutely positioned, it does not move them, and when I make their positions relative, the website looks very messy. I would love some help, and could provide more code if you need it. I think the main problem is in the absolute positioning.

Problems setting max-width for a whole website?

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:



 
 
 
 

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 don't get a blank square or anything else of the sorts; just a blank.

This works: ``

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):



 
 
 
 

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/