CSS Styling with Font-Awesome Icons (previewed in Large Size)

Screen Shot 2014-09-24 at 9.48.47 AM
The FontAwesome icon project is a simple yet elegant collection of css-based icons for enhancing digital media projects, giving websites a clean and modern feel.However we have to squint when browsing little icons on the main site.But these icons also look great big larger size (by adding “fa-4x” in the examples below, we make the icon 4 times larger than default). We hope you find this list useful.

Using the fonts is easy, add this in your header:

<link href=”//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css” rel=”stylesheet”>

Then on a webpage, for example, this would add a suitcase should at 3X default size:

<i class=”fa fa-suitcase fa-align-center fa-3x”></i>

To style all of them with colors etc, use in your css:

.fa {


or to style them individually, use inline css like this:
<i style=”color:blue” class=”fa fa-phone fa-align-center fa-2x”></i></font>

Trouble-shooting: if they don’t work when copy/pasting from this page, try re-typing the quote marks in a text editor)

All brand icons are trademarks of their respective owners. The use of these trademarks does not indicate endorsement of the trademark holder by Font Awesome, nor vice versa.


Share Button