Skip to main content

Quick Tip: Using Font Awesome 4 With Bootstrap 3

This is a quick post on how to use Font Awesome with Bootstrap 3.

First, these examples will be using the Font Awesome CDN. Alternatively, there are many other ways to include in your project. Visit their website at: fontawesome.com Getting Started page.

To use font-awesome, you will need to have a customized version of the latest version of Bootstrap 3 "Without icons". This blog shows two ways to you can accomplish this.

Bootstrap CDN:

The first way is to use the Official bootstrap CDN with no Glyphicons included.

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.no-icons.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

Custom Bootstrap CSS

The second way is to configure your own download. The steps are under: "LESS files" > "Components" (middle column) > Uncheck "Glyphicons".

Enter in any other information (or remove JS not being used, and then scroll to the bottom of the page and click "Compile and download".

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
Screenshot

Notes:

Bootstrap 3 requires IE9+ or latest Safari, Chrome, or Firefox. Font Awesome 5 has issues with @font-face in IE 8 and does not support IE 7 (read the Getting Started page near the bottom to read more).

Resources: