Best Way to use Font Awesome Icons

I have already written two posts about using Font-Awesome. Now this posts in not about getting icons on web page but about using their CSS and Font file in best possible way (as I know!).

Instead of calling directly their file on CDN, get all font-awesome provided css and club with your own CSS. Then, change CSS font files locations on that CSS (font-awesome.css) to their CDN locations. In this way, we do not generate separate network call for CSS and result is quick parsing by browser. Using Font from their network can maximize the possibility of getting cached version of font, if visitors has visited any website that are using Font-Awesome from Font-Awesome CDN (bootstrapcdn.com).

I am using LESS, so I renamed font-awesome.css file to font-awesome.less and included in main.less file. Leave it if you are not using any CSS preprocessor. It may be confusing for you!

Here is code snippet from font-awesome.css file after modification of font location to their cdn:


@font-face {
  font-family: 'FontAwesome';
  src: url('http://netdna.bootstrapcdn.com/font-awesome/4.0.3/fonts/fontawesome-webfont.eot?v=4.0.3');
  src: url('http://netdna.bootstrapcdn.com/font-awesome/4.0.3/fonts/fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'), url('http://netdna.bootstrapcdn.com/font-awesome/4.0.3/fonts/fontawesome-webfont.woff?v=4.0.3') format('woff'), url('http://netdna.bootstrapcdn.com/font-awesome/4.0.3/fonts/fontawesome-webfont.ttf?v=4.0.3') format('truetype'), url('http://netdna.bootstrapcdn.com/font-awesome/4.0.3/fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
  • # 1 - by Ahmed Shawan

    It helped me, cause i wanna install and load font-awesome on my blog directly not using css link.

    Thanks again…

Comments are open for an year period. Please, write here on Facebook page.