about this tutorial
Goal
The objective of this tutorial is to teach you how to download and integrate Icon Fonts into your website.
Lessons
This tutorial will teach users the functionality and how to properly use the following in Icon Fonts:
Font Awesome and Ico Moon file download links
How to use Font Awesome and Ico Moon
Bootstrap code
<i> tag
Font icon CSS
prerequisite
For this tutorial, you will need to know all basic fundamentals of HTML and CSS, along with semantic tags. If you don’t feel you are ready, please review the pervious tutorial.
What are Icon Fonts?
While visiting a webpage, users will have most likely interacted with vector icons, whether it’s for social media links on blogs, shopping carts on e-commerce sites, and so on. We have all used these icons in one form or another. Although, what many do not realize is that these vector icons are not just images but customizable fonts that can be scaled, colored and animated though CSS. Developers call these vector graphics, Icon Fonts.
There are two free specific font icon applications, Font Awesome and Ico Moon, which we use in this lesson. Even though, both Font Awesome and Ico Moon look the same, they are very different. Font Awesome has 369 icons and operates from a front-end framework called Bootstrap that can create elements like buttons. Whereas, Ico Moon uses Roonas framework and has over 4,600 icons, also, Ico Moon allows developers to create their own font icons. To incorporate font icons, you must use the <i> tag with a class attribute.
Font Awesome
Before you start, please go to the Font Awesome website, click here. You will need to download the files and reference the icon font list.
Linking to Font Awesome
Font Awesome is arguably the most straightforward icon font generator to use. There are five methods to integrate Font Awesome, but for this tutorial, we focus on two particular ways
One way is simply link directly to BootstrapCDN
Example:
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
However, the problem with this approach is that you are relaying on files on an external server. As we all know, if the server goes down, your website loses those font icons. The best option is to download the Font Awesome.
To do so follow these steps:
Go to the homepage of Font Awesome, click on the download button to get the files.
Once the download is compete, drag or copy the Font Awesome folder to your project folder.
Once the download is compete, drag or copy the Font Awesome folder to your project folder.
Example:
<link href="lib/font-awesome-4.0.3/css/font-awesome.css" rel="stylesheet">
Now that you have setup Font Awesome for your project, we move on to learn the different ways to use font icons.
Font Icons as Inline elements
As stated before you will need to use <i> element with an attribute of class to incorporate icon fonts. The class attributes needs to be given the name of the font icons, for instance, to use a bookmark icon, and denote the class’ name of “fa fa-home.” “fa” stands for Font Awesome, “fa-home” is the name of the icon.
Example:
<i>class="fa fa-home"></i>
Results:
Height and fixed width of icon fonts
You can enlarge the icon fonts by using five classes “fa-lg” which make the 33% bigger than the standard. “fa-2x” makes the font two times bigger. “fa-3x” makes the font three times bigger fa-4x” makes the font four times bigger and “fa-5x” makes the font five times bigger.
Example:
<i class="fa fa-html5 fa-lg"></i>
<i class="fa fa-html5 fa-2x"></i>
<i class="fa fa-html5 fa-3x"></i>
<i class="fa fa-html5 fa-4x"></i>
<i class="fa fa-html5 fa-5x"></i>
Results:
You are able to dictate the width of font icon by the class name “fa-fw” “fw” means fixed width.
Example:
<i class="fa fa-book fa-fw"></i>
Results:
You can use icon fonts in lists; give the class name of “fa-ul” to the <ul> tag. Also, add “fa-li” before the icon name.
Example:
<ul class="fa-ul">
<li><i class="fa-li fa fa-check-square"></i>Check Sqaure</li>
<li><i class="fa-li fa fa-square"></i>Bullet points</li>
<ul>
Results:
- Check Sqaure
- Bullet points
You can stack icon fonts by using “fa-stack” class, “fa-stack-1x” is standard. Also, you can turn the list into a navigation list.
Example:
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="facebook.com "><i class="fa fa-facebook-square fa-fw"></i> Facebook</a></li>
<li class="active"><a href=" twitter.com "><i class="fa fa-twitter-square fa-fw"></i> Twitter</a></li>
<li class="active"><a href="youtube.com"><i class="fa fa-youtube fa-fw"></i> Youtube</a></li>
</ul>
Results:
Bordered, pulled, rotation
If you want to put a border around the icons, use “fa-border” you also can “pull-right” and “pull-left”
Example:
<i class="fa fa-quote-left fa-2x pull-left fa-border"></i>
Results
If you want to make the icon to spin, insert the class name of “fa-spin”
Example:
<i class="fa fa-refresh fa-spin"></i>
Results:Rotate and flipping are made possible by using the class name of “fa-rotate” which has three rotations (“90” “180” “270”) and “fa-flip” which has “horizontal” and “vertical”.
Example:<i class="fa fa-shield fa-rotate-90"></i>
<i class="fa fa-shield fa-flip-vertical">
Results:
Rotate "90" Flip HorizontalIco Moon
Even though, Ico Moon has thousands of more icon fonts than Font Awesome, it is as not straightforward. On the other hand, Ico Moon does allow user to upload and create icon fonts of their own selection. Ico Moon can get complicated. However, this section will guide you step by step though a very basic way.
Go to the website: icomoon.io, then on the upper right corner click on the “Launch App” button.
You should be on a page with a bunch of icons, if not, repeat step 1.
Select a few icons, and then click on the button that is labeled “Fonts”
Now you should be page with the names of the icons, if not, repeat step 2.
Click on “Download” button.
After the icons are downloaded, unzip the icomoon folder and drag or copy the all of the files to your site project’s lib subfolder.
Create a subfolder called “ico_moon” and move the downloaded files to this subfolder.
Then, go to your site’s CSS stylesheet, and you want to copy (or paste) the following code:
Finally, just like Font Awesome, use the <i> tag. This time, you give the class name of “icon-“ and whatever the title of the icon.
@font-face {
font-family:"icomoon";
src:url("ico_moon/fonts/icomoon.eot");
src:url("ico_moon/fonts/icomoon.eot?#iefix") format("embedded-opentype"),
src:url('ico_moon/fonts/icomoon.woff') format('woff'),
url('ico_moon/fonts/icomoon.ttf') format('truetype'),
url('ico_moon/fonts/icomoon.svg#icomoon') format('svg');
font-weight:normal;
font-style:normal;
Now, insert the following code to your CSS, because we are going to give a class name to icon fonts.
[class^="icon-"]:before, [class*=" icon-"]:before {
font-family:"icomoon;
font-style:normal;
speak:none;
font-weight:normal;
-webkit-font-smoothing:antialiased;
Example:
<i class="icon-twitter"></i> Twitter
Results:
TwitterYou can change the color, size, etc though CSS.
Summary
Icon Fonts gives give developers option to make their website more dymatic.
If you want or need to see alternate explanations and tutorials of Font Icons, check out these links and videos:.
practice
Now it’s time to put your acquired skills to work. Your assignment is to create a social media navigation bar using Icon Fonts like this example. You are allowed to experiment with this example or come with your own. First, create a blank web document, then insert the Font Awesome CSS or you can download the example that is already started for you.
If you get stuck on the assignment or want to see how it was done as compared to yours, click the answer sheets below: