Use Font Awesome Icons in CSS

font awesome css content
how to use font awesome 5
how to use font awesome icons
how to use font awesome offline
use font awesome free cdn
font awesome 5 cdn
font awesome 4.7 icons
css icons

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?

Basic Use, Font Awesome icons automatically inherit CSS size and color (as seen in the examples below). This means they blend in with text inline wherever you put them. Font Awesome is designed to be used with inline elements. The <i> and <span> elements are widely used for icons. Also note that if you change the font-size or color of the icon's container, the icon changes. Same things goes for shadow, and anything else that gets inherited using CSS.

Further to the answer from Diodeus above, you need the font-family: FontAwesome rule (assuming you have the @font-face rule for FontAwesome declared already in your CSS). Then it is a matter of knowing which CSS content value corresponds to which icon.

I have listed them all here: http://astronautweb.co/snippet/font-awesome/

Get Started with Font Awesome, Want to manage and host Font Awesome assets yourself? You can download, customize, and use the icons and default styling manually. Both CSS and CSS  How to use Font Awesome icons within CSS. Font Awesome is an incredible free icon font library that you can use on your website. I’ve already shared a post all about using Font Awesome to create social media icons using HTML and then using CSS to style these icons, but I wanted to write a post about using icons within CSS itself.

Actually even font-awesome CSS has a similar strategy for setting their icon styles. If you want to get a quick hold of the icon code, check the non-minified font-awesome.css file and there they are....each font in its purity.

Use Font Awesome Icons in CSS, 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,  The most popular font for creating CSS-based icons is Font Awesome. This font and icon toolkit was created by Dave Gandy, originally for Twitter Bootstrap, and is available free under SIL Open Font License 1.1, Creative Commons Attribution 4.0, and MIT License.

Consolidating everything above, the following is the final class which works well

   .faArrowIcon {
        position:relative;
    }

    .faArrowIcon:before {
        font-family: FontAwesome;
        top:0;
        left:-5px;
        padding-right:10px;
        content: "\f0a9"; 
    }

Font Awesome Intro, To use the Font Awesome icons, add the following line inside the <head> ://​cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">. Font Awesome gives you scalable vector icons that can instantly be customized. You can change Font Awesome icon using CSS without changing HTML content. Some of the case, you may have to change icon dynamically like on hover, click etc.

You can try this example class. and find icon content here: http://astronautweb.co/snippet/font-awesome/

  #content h2:before {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
    content: "\f007";
    }

How to Create Font Awesome Icons with CSS, learn how to create icons using just CSS and fonts. This will allow you to edit all your graphics with just a few lines of code. How to Use Font Awesome Icons ¶ Icons can be placed almost anywhere using a style prefix (fa) and the name of the icon. Font Awesome is used with inline elements, and it is recommended that you stick to them in a project with a consistent HTML element. It is acceptable to use the <i> and the <span> tags to add icons on the webpages.

Use fontawesome icons using css - HTML-CSS, Hello, I am working on some project and I want to use font awesome icon using CSS but I am unable to use it. It works if I am using it through  Font Awesome is a tool which can be used as icons that are often used on the Web as characters called icon fonts. Due to the fact that the font is not an image but a character, you can change the size, rotation, overlapping display, and even the colour.

Complete list of Font Awesome icons with their CSS content values, Code snippet for how to use Font Awesome on any element and a full list of all the Font Awesome icons and their CSS content values. Updated  Font Awesome is a web font containing all the icons from the Twitter Bootstrap framework, and now many more. Whilst the implementation in Bootstrap is designed to be used with the <i> element (Bootstrap v2), you may find yourself wanting to use these icons on other elements.

How to use font awesome icon as css content. "before" pseudo , <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <! Arnold Schwarzenegger This Speech Broke The Internet AND Most Inspiring Speech- It Changed My Life. - Duration: 14:58. Andrew DC TV Recommended for you

Comments
  • Glyphs from fonts cannot be used as backgrounds. SVGs, however, can
  • @cimmanon would you mind explaining how that could apply to font-awesome
  • @BonsaiOak What's to explain that isn't already explained by the selected answer? If you have a question that isn't answered by this (or any other question on SO), then ask a new question.
  • @cimmanon sorry for the lack of clarity. You seemed to imply that it was possible to use an icon from the font-awesome.svg font file as the background. However, you never said that explicitly so I'm not sure.
  • @BonsaiOak Yes, you can use an SVG as a background image, the same way you would use any other image. However, I have not actually looked at the FontAwesome SVG to verify that it can be used in this way.
  • The text-equivalent of each icon is there fortawesome.github.io/Font-Awesome/cheatsheet
  • You'll have to remove &#x from the beginning and ; from the end. The font-family name is FontAwesome
  • @David, it's just text, use font-size.
  • for FontAwesome v5 you need to use .backspace:before { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f55a"; }
  • Just a note that this doesn't appear to work with Input elements (like a submit button) since they don't seem to support :before or :after.
  • worked after i removed position: absolute; in the .element:before, now i can decorate my links with font awesome icons but keep my custom font of the link