Warning! Unfortunately, the copy buttons on these cheat sheets only work with Flash installed.

Font Awesomev.4.7.0

For Animation Icons Goto https://tinify.ir/faa

1. HTML Tag

You can use a simple <i> tag to place an icon in your page, like this:

<i class="fa fa-home"></i> =

  • The first class—fa—is a base class. It tells the <i> tag, "hey, heads up: this is going to be an icon."
  • The second class (in this example, fa-home) points the specific icon you want to use. This one is an icon of a house!

To use a HTML Tag for an icon, simply copy and paste <i class="fa fa-home"></i> anywhere within the <body> of your page.

Warning: Don't mix with other components

Icon classes shouldn't be combined with other elements. They're designed to be standalone.

2. Unicode HTML Entity

This works slightly differently, by:

  1. Specifying the Font Awesome web-font in a CSS rule with font-family
  2. Using the Unicode HTML Entity to display the icon

Firstly, the CSS rule. This should be placed inside a <style> tag, or better yet, in a seperate stylesheet:

              span.icon { 

                font-family: FontAwesome; 

              }

Next, the HTML Entity part:

              <span class="icon">&#xe021;</span>

The CSS rule specifies that any Unicode HTML Entity inside a <span class="icon"> tag will be rendered on the page as an icon.

The HTML entity inside the tag (in this case, &#xe021;) is a string of characters that tells the web-font to display a certain icon.

Note: This method may offer you more flexibility (for example, you could use a <div> or <span> tag instead).

3. CSS Rule

This method works by including the rendering of the icon before the content using the :before CSS psuedo-element.

Firstly, the web-font is specified with font-family, and then the icon is specified by using the content property alongside a unicode hex entity (in this case, e021).

Because the hex entity is inside a style tag, it must be prepended with an escaped backslash, making it \e021.

This should be placed inside a <style> tag, or better yet, in a seperate stylesheet:

              span.icon:before { 

                font-family: FontAwesome; 

                content: "\f015"; 

              }

To add this icon to a page, add this HTML tag anywhere in the body of your page.

              <span class="icon"></span>

Note: This method is useful because it seperates the visual elements of your design—like icons—from the structural HTML, so you can add glyphicons to existing elements. Particularly useful for tasks like Wordpress or Moodle theme development, for example.

Examples

Note: For simplicity & clarity, in these examples Font Awesome has been paired up with the web components from Bootstrap 3. However, Font Awesome can be used in any website or web framework.

You can use glyphicons in a variety of ways; in buttons, button groups for a toolbar, navigation or prepended form inputs. Here are a few examples of glyphicons in action.

<button type="button" class="btn btn-default btn-lg">

          <i class="fa fa-star"></i> Star 

        </button>
        
          <div class="btn-toolbar" role="toolbar"> 

              <div class="btn-group"> 

                  <button type="button" class="btn btn-default"> 

                    <i class="fa fa-align-left"></i> 

                  </button>

                 <button type="button" class="btn btn-default"> 

                    <i class="fa fa-align-center"></i> 
 
                  </button>

                   <button type="button" class="btn btn-default"> 

                     <i class="fa fa-align-right"></i> 

                  </button>

                  <button type="button" class="btn btn-default"> 

                     <i class="fa fa-align-justify"></i> 

                   </button>

               </div> 

          </div>

Form Inputs

                <div class="input-group input-group-lg">

                <span class="input-group-addon">

                  <i class="fa fa-envelope"></i>

                </span>

                <input class="form-control" type="text" placeholder="Email address">

            </div>

            <div class="input-group input-group-lg">

                <span class="input-group-addon">

                  <i class="fa fa-lock"></i>

                </span>

                <input class="form-control" type="password" placeholder="Password">

            </div>