L84 L84 - 1 year ago 93
CSS Question

Use Font Awesome Icons in CSS

I have some CSS that looks like this:

#content h2{
background:url(../images/tContent.jpg) no-repeat 0 6px;

I would like to replace the image with an icon from Font Awesome.

I do not see anyway to use the icon in CSS as a background image. Is this possible to do assuming the Font Awesome stylesheets/fonts are loaded before my CSS?

Answer Source

You can't use text as a background image, but you can use the :before or :after pseudo classes to place a text character where you want it, without having to add all kinds of messy extra mark-up.

Be sure to set position:relative on your actual text wrapper for the positioning to work.

.mytextwithicon {
.mytextwithicon:before {
    content: "\25AE"; <--- this is your text. You can also use UTF-8 character codes as I do here
    font-family: FontAwesome;