Quick Tip: Using Font Awesome 4 with Bootstrap 3
Outdated: This post is preserved for reference and may no longer reflect current tools or services.
This is a quick post on how to use Font Awesome 4 with Bootstrap 3.
These examples use the Font Awesome CDN, although there are other ways to include it in a project. For more setup options, see the Font Awesome 4 Getting Started page.
To use Font Awesome with Bootstrap 3, you may want a version of Bootstrap without Glyphicons included. This post shows two ways to do that.
Bootstrap CDN
The first option is to use the official Bootstrap CDN version without 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 option is to configure your own Bootstrap download. Under LESS files → Components, uncheck Glyphicons.
You can also remove any JavaScript components you are not using. When finished, 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">
Notes
Bootstrap 3 requires IE9+ or the latest versions of Safari, Chrome, or Firefox. Font Awesome 4 has its own browser support notes, so it is worth reviewing the Getting Started page for compatibility details.