Yes, there is. This is how it works.
Creating the font
To avoid using giant fonts just to support a few special characters, you can create your own fonts with tools like the Icomoon App.
The Icomoon App allows you to do each of the following :
- Get one or more icons from several popular icon fonts
- Upload other fonts, which may be icon fonts but also regular fonts
- Upload SVG files to use as icons
- Combine any number of icons from any number of available fonts
- Set the UNICODE hex value for whichever characters you need
- Export and/or save the font set you create
I used the Icomoon App to create the Emoji emoticon font as well as for creating custom icon fonts on a per project basis.
Using the font
To include an icon font in your CSS, you can include the following code :
@font-face {
font-family: 'myfont';
src:url('fonts/myfont.eot?-td2xif');
src:url('fonts/myfont.eot?#iefix-td2xif') format('embedded-opentype'),
url('fonts/myfont.woff?-td2xif') format('woff'),
url('fonts/myfont.ttf?-td2xif') format('truetype'),
url('fonts/myfont.svg?-td2xif#myfont') format('svg');
// Different URLs are required for optimal browser support
// Make sure to :
// 1) replace the URLs with your font's URLs
// 2) replace `#myfont` with the name of your font
font-weight: normal; // To avoid the font inherits boldness
font-style: normal; // To avoid font inherits obliqueness or italic
}
.icon {
font-family: 'myfont', Verdana, Arial, sans-serif; // Use regular fonts as fallback
speak: none; // To avoid screen readers trying to read the content
font-style: normal; // To avoid font inherits obliqueness or italic
font-weight: normal; // To avoid the font inherits boldness
font-variant: normal; // To avoid the font inherits small-caps
text-transform: none; // To avoid the font inherits capitalization/uppercase/lowercase
line-height: 1; // To avoid the font inherits an undesired line-height
-webkit-font-smoothing: antialiased; // For improved readability on Webkit
-moz-osx-font-smoothing: grayscale; // For improved readability on OSX + Mozilla
}
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.