Skip to content

Instantly share code, notes, and snippets.

@rurtubia
Last active October 16, 2015 13:55
Show Gist options
  • Save rurtubia/a9a1b61197148b349240 to your computer and use it in GitHub Desktop.
Save rurtubia/a9a1b61197148b349240 to your computer and use it in GitHub Desktop.
Font Awesome

Font Awesome tutorial and cheatsheet

GitHub project
Cheatsheet URL
Icon List per Categories

  1. Paste the following code into the section of your site's HTML.
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  1. Immediately after release, it takes a bit of time for BootstrapCDN to catch up and get the newest version live on their CDN.
  2. Pat yourself on the back for your scalable-vector-icons-on-the-website judo solution in a single line of code.
  3. Check out the examples to start using Font Awesome!

Example of use:

<button class='btn btn-block btn-primary'>
  Like
  <i class="fa fa-thumbs-up">
  </i>
</button>

Another example:

<div class='row'>
  <div class='col-xs-4'>
    <button class='btn btn-block btn-primary'>
      <i class='fa fa-thumbs-up'></i> 
      Like</button>
  </div>
  <div class='col-xs-4'>
    <button class='btn btn-block btn-info'>
      <i class='fa fa-info-circle'>
         </i> Info</button>
  </div>
  <div class='col-xs-4'>
    <button class='btn btn-block btn-danger'>
      <i class='fa fa-trash'>
      </i>
      Delete</button>
  </div>
</div>

Cheatsheet

Part 1 Part 2 Part 3 Part 4

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment