UI: Chrome UI Kit
Tutorial: Notification bubble with CSS3 keyframe animation

Typography: Font Awesome


The iconic font designed for use with Twitter Bootstrap

New Icon in 2.0

Resource: Font Awesome

Icons by Category

- Web Application Icons

Resource: Font Awesome

- Text Editor Icons

Resource: Font Awesome

- Directional Icons

Resource: Font Awesome

- Video Player Icons

Resource: Font Awesome

- Social Icons

Resource: Font Awesome


1. Copy the Font Awesome font directory into your project.
2. Copy font-awesome.less or font-awesome.css into your project.
3. Open your project's font-awesome.less or font-awesome.css and edit the font url to ensure it points to the right place (see above example).

  1. @font-face {
  2. font-family:'FontAwesome';
  3. src: url('../font/fontawesome-webfont.eot');
  4. src: url('../font/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
  5. url('../font/fontawesome-webfont.woff') format('woff'),
  6. url('../font/fontawesome-webfont.ttf') format('truetype'),
  7. url('../font/fontawesome-webfont.svg#FontAwesome') format('svg');
  8. font-weight: normal;
  9. font-style: normal;
  10. }

4. Check out the examples to start using Font Awesome!


Tags: iconic, font, design, html, css

Leave a Comment

No Comment

© Creative3x Ltd.