fonts Icon fonts Using an icon font on a web page
Example
To use an icon in your HTML, you can do each of the following :
<!-- Method 1 -->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family for an entire HTML element -->
<!-- Define your icon fonts in your CSS font-family after your regular fonts -->
<!-- This means that regular characters are default. Icons are a fallback -->
<!-- Use UTF-8 characters directly in your HTML for improved human readability -->
<div class="rate"><p>I rate this movie ★★★★☆!!</p></div>
<!-- Method 2 -->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family for an entire HTML element -->
<!-- Define your icon fonts in your CSS font-family after your regular fonts -->
<!-- This means that regular characters are default. Icons are a fallback -->
<!-- Use entity codes in your HTML when UTF-8 support is uncertain -->
<div class="rate"><p>I rate this movie ★★★★☆!!</p></div>
<!-- Method 3 -->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family only for the icons but not the HTML elements that include them -->
<!-- Define your icon fonts in your CSS font-family before your regular fonts -->
<!-- This means that icons are default. Regular characters are a fallback -->
<!-- Use UTF-8 characters directly in your HTML for improved human readability -->
<p>I rate this movie <span class="icon">★★★★☆</span>!!</p>
<!-- Method 4 -->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family only for the icons but not the HTML elements that include them -->
<!-- Define your icon fonts in your CSS font-family before your regular fonts -->
<!-- This means that icons are default. Regular characters are a fallback -->
<!-- Use entity codes in your HTML when UTF-8 support is uncertain -->
<p>I rate this movie <span class="icon">★★★★☆</span>!!</p>
<!-- Method 5 -->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family only for the icons and use a separate HTML tag for each icon -->
<!-- Define your icon fonts in your CSS font-family before your regular fonts -->
<!-- This means that icons are default. Regular characters are a fallback -->
<!-- Use UTF-8 characters directly in your HTML for improved human readability -->
<p>I rate this movie
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">☆</span>
!!
</p>
<!-- Method 6 -->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family only for the icons and use a separate HTML tag for each icon -->
<!-- Define your icon fonts in your CSS font-family before your regular fonts -->
<!-- This means that icons are default. Regular characters are a fallback -->
<!-- Use entity codes in your HTML when UTF-8 support is uncertain -->
<p>I rate this movie
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">☆</span>
!!
</p>
<!-- Method 7-->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family only for the icons and use a separate HTML tag for each icon -->
<!-- Define your icon fonts in your CSS font-family before your regular fonts -->
<!-- This means that icons are default. Regular characters are a fallback -->
<!-- Use the 'content' style rule with a ':before selector' in your CSS -->
<p>I rate this movie
<span class="icon icon-star"></span>
<span class="icon icon-star"></span>
<span class="icon icon-star"></span>
<span class="icon icon-star"></span>
<span class="icon icon-star-unfilled"></span>
!!
</p>
If you want to opt for method 7, you'll need some additional CSS code. This CSS code would look like this :
.icon-star:before {
content: "\2605";
}
.icon-star-unfilled:before {
content: "\2606";
}
Icon fonts like Iconic, Font Awesome or Glyphicons typically all use method 7. This, to avoid you having to copy-paste special characters from a cheat sheet or being forced to use HTML entities.
It is, however, a method that has several downsides. First of all, it requires support for the :before CSS selector and the use of an escape sequence for UNICODE characters. Neither IE6-7 nor certain versions of Webkit provide this support.
Another downside is that you have to use a seperate HTML tag for each icon, with each tag corresponding to one character from the icon font. Displaying several icons within HTML tag is not possible with method 7, unlike with other methods.
Other methods have their own downsides, though. Methods 1, 3 and 5 require you to copy-paste the character from a cheat sheet or use means to put the character itself within your code. Your code editor may not be capable of displaying the character or it may display a different character from the one in your icon font if the icon font uses a non-standard mapping that character.
Methods 1, 3 and 5 also require that your browser uses the proper encoding to display the correct character. For UNICODE characters, this isn't as obvious as it is for ASCII characters. This should, however, be ensured by adding the meta-tag <meta charset="utf-8" /> somewhere in the head of your HTML-document.
Methods 2, 4 and 6 do not require you to copy-paste the character, however it makes your code less readable by humans and makes any changes to the code more prone to human error. Also, as you will need to look up the HTML-entity code for each of the icons you want to use or you'll need to memorize them. While the same obviously applies to the classes used in method 7 as well, those classes are much easier to memorize than an HTML entity code.
