article:
Elements Design: Free Retro Vectors
article:
UI: Prime UI Kit Interface

Typography: Font Awesome Version 3

Advertisement

Font Awesome is the iconic font designed for use with Twitter Bootstrap.


Characteristics

- a pictographic language of web-related actions;
- scalable vector graphics;
- high-resolution displays;
- is completely free for commercial use;
- supports IE7;
- fully compatible with Twitter Bootstrap 2.2.2.



Integration

Easy Bootstrap + Font Awesome Integration

1.Copy the Font Awesome font directory into your project.
2.Copy font-awesome.min.css into your project.
3.Open your project's font-awesome.min.css and edit the font paths to ensure they point to the right place.
4. In the <head> of your html, reference the location to your font-awesome.min.css.

  1. <linkrel="stylesheet"href="../css/bootstrap.min.css">
  2. <linkrel="stylesheet"href="../css/font-awesome.min.css">

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



Custom Bootstrap + Font Awesome Integration using LESS

1.Copy the Font Awesome font directory into your project.
2.Copy font-awesome.less into your bootstrap/less directory.
3.Open bootstrap.less and replace @import "sprites.less"; with @import "font-awesome.less";
4.Open your project's font-awesome.less and edit the @FontAwesomePath variable to point to your font directory.

@FontAwesomePath:"../font";

5. Re-compile your LESS if using a static compiler. Otherwise, you should be good to go.
6.Check out the examples to start using Font Awesome!


Custom Bootstrap + Font Awesome Integration using SASS or SCSS

1.Copy the Font Awesome font directory into your project.
2.Copy font-awesome.less or font-awesome.min.css into your project.
3.Open your project's font-awesome.less or font-awesome.min.css and edit the font location to point it to your font directory (see above examples).
4.Check out the examples to start using Font Awesome!


IE7 Support

1.Get Font Awesome working properly in a modern browser.
2.Copy font-awesome-ie7.min.css into your project.
3. In the <head> of your html, reference the location to your font-awesome-ie7.min.css.

  1. <linkrel="stylesheet"href="../css/bootstrap.min.css">
  2. <linkrel="stylesheet"href="../css/font-awesome.min.css">
  3. <!--[if IE 7]>
  4. <link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css">
  5. <![endif]-->

4. Go complain to whoever decided your project needs IE7 support.



Screenshots

New Icons in 3.0
Resource Typography: Font Awesome Version 3

Web Application Icons
Resource Typography: Font Awesome Version 3

Text Editor Icons
Resource Typography: Font Awesome Version 3

Directional Icons
Resource Typography: Font Awesome Version 3

Video Player Icons
Resource Typography: Font Awesome Version 3

Social Icons
Resource Typography: Font Awesome Version 3

Medical Icons
Resource Typography: Font Awesome Version 3

Please share your feedback in comments below

Download the file and share your own design with me.



demo
for designer
github
source
download

Advertisement
Tags: font, awesome, pictogram, typography, icons, web application icons, text editor icons, directional icons, video player icons, social icons, medical icons

Leave a Comment

No Comment

© Creative3x Ltd.