Inserting icons into a website isn’t difficult. But when you combine text and icons (for example on a button), or if the icon should be resizable, it can cause some trouble.
The solution is to use Icon Fonts. Icon fonts are fonts that contain icons instead of letters. Thus, these icons can be used just like any other font, that means you can change their size and even their color.
In the following, we will look at a few icon fonts and their use.
Glyphicons (with Bootstrap 3)
If you’re using Bootstrap 200 Glyphicons are automatically integrated.
Here is a list of all available icons in the Bootstrap dokumentation under Glyphicons.
To use an icon we define a <span> element and give it two CSS classes:
<span class="glyphicon glyphicon-send"></span>
This span element can be inserted anywhere, for example in a title of a contact page:
Font Awesome
One of the most popular freely available icon font is Font Awesome. Font Awesome comes with more than 500 icons.
To integrate Font Awesome you can simply use their CDN link. This means you don’t need to download anything and you can simple add the following line to the <head> section of your HTML file:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
Note: Look up the CDN link on the Font Awesome Website to get the latest version.
Font Awesome icons are used by declaring an <i> element with specific CSS classes.
<i class="fa fa-flag"><i>
This example produces a flag: 
Have a look at the Font Awesome examples to see what you can do with the icons. You will also find some examples of how to use Font Awesome Icons in combination with Bootstrap components.
Other Icon Libraries
- On IcoMoon you’ll find an app to create your own icon font.
- Fontello is another generator for icon fonts.
- Iconfinder - A lot of freely available icons (Note: Depending on the license you will need to mention the author on your website)
- A list of 12 free icon fonts (in German).