Introduction

Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.

Links of Interest

Basics

  • Free
  • One font, 675 icons
  • No JavaScript required
  • Infinite Scalability
  • CSS control
  • Perfect on Retina displays
  • Plays well with others (Bootstrap)
  • Accessibility-minded

Example

FontAwesome is very simple to use, just add a link to the font-awesome.min.css in the <head> section of your HTML page or Web site's MasterPage, then create a CSS rule that consumes one or more FontAwesome icons. Use the Cheatsheet PDF to determine the proper values to use to represent a particular icon.

    <link href="/styles/font-awesome.min.css" rel="stylesheet" />

Note: This example requires that you have the font-awesome.css file linked to the page where the CSS rule is to be applied.

        a[target="_blank"]:after {
            font-family: 'FontAwesome';
            content:" \f08e"; 
        }

Results of the above code:

Link text