Different approaches can be used to integrate FontAwesome into a website:
For plain HTML/CSS:
/css/font-awesome.cssin the webpage
<link rel="stylesheet" src="/assets/font-awesome/css/font-awesome.css">
headusing a CDN address. One such address would be
https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css. To reference this, just use a
linktag but set the source to the CDN address instead
For Package managers:
Most package managers support Font Awesome as a package, and there are some examples below:
Font-Awesome, or run the below command in the package console:
gem install font-awesome-rails
npm install font-awesome
The simple use-case is to refer to a single icon in its normal size:
<i class="fa fa-camera-retro"></i> (View result in this fiddle.)
Create an empty tag (it is recommended to use
<i> used for that) and assign class "
fa" and the class corresponding to the desired icon (see list of icons here).
Font Awesome is an extremely simple yet powerful library to use, with 634 icons available in just a few words.
How does it work?
Font Awesome uses Unicode characters stored in a
../fonts directory to change any
i.fa elements to the respective unicode character, as such displaying the icon as text.
How do I create an icon?
All icon classes have to be an
i element, or an
italic element, mainly for best practice, but also improves performance with Font Awesome. All icons also have the class
fa on them. This denotes an icon and will not work without it. After that, just add the icon you want, prefixed with another
fa-. A finished example is below:
Because font awesome works off unicode characters, it also allows any text manipulation to apply to it as well, such as
color, and more.