Lesson 108: Font Awesome

Estimated Length: 25min | Difficulty: Beginner

In this lesson we will be learning about how to use Font-Awesome to include icons into your site. We will also go over web fonts, where to get them, and how to include them into your site. Finally, we will go over the pros and cons of using these resources. Let's get started!

Font Awesome and Web Fonts

About Font Awesome

Font Awesome provides scalable vector icons that you can easily add into your site. They can be easily customized by changing the color, size, and any other effects you would like through CSS.

How to Link to Font Awesome

Step 1: Go to fontawesome.github.io/Font-Awesome/

Step 2: Download Font Awesome from the front page

Step 3: Locate files in the Downloads folder and open the ZIP folder.

Step 4: Place the CSS and Fonts folder from the Font Awesome folder into your lib folder.

Step 5: Link the font-awesome CSS document to your html pages in the head tag area. Preferably below the "title" tag.

Example:

<link href="lib/css/font-awesome.css" rel="stylesheet"/>

How to add Font Awesome to your site

Step 1: Go back to the Font-Awesome page and search for the icon you want.

Step 2: Copy and paste the code for the icon into your html document.

Example:

<span class="fa fa-facebook">

Result:

How to change the size of the Icon

If you would like to increase the size of the icon, you can do so by adding fa-2x (twice as large as original size), fa-3x (3 times as large), fa-4x (4 times as large) or fa-5x (five times as large) to the class of the icon.

Example:

2x:

3x:

4x:

5x:

How to change the color of the Icon

Step 1: You can change the color of the icon by targeting class .fa in css and changing the color there. This will change the color of all of the icons.

Example:

.fa{color:black;}

If you want to only change the color of one icon, target its name like fa-twitter

Example:

.fa-twitter{color:orange;}

About Google Fonts

Google Fonts is a great resource to be able to quickly and easily find a font you would like to use for your site, and incorporate into your code easily.

As stated on the Google Fonts page, "We believe that everyone should be able to bring quality typography to their web pages and applications. Our goal is to create a directory of web fonts for the world to use."

How to add Google Fonts to your site

Step 1: Go to google.com/fonts

Step 2: Search for a font that you would like to use. (Ex. Open Sans)

Step 3: Click on the "Quick Use" button below the font you wish to use.

Step 4: Select all the styles of the font that you want. (Ex. Normal 400, Bold 700, Light 300)

Step 5: After you have selected the fonts, scroll to the section with the Standard, @import, and Javascript tabs. (labeled as “3. Add this code to your website”) We recommend that you use the Standard and @import links to embed the fonts to your web page.

Step 6: Add the font into your CSS stylesheet

Example:

h1{font-family:'Open-Sans',sans-serif; font-weight:700;}

Advantages of web fonts

1. You don't have to create an image to be able to show or use the font style.

2. Allows the use of fonts that are not installed on the users' machines

Disadvantages of web fonts

1. If you use too many, it will slow down the loading time for your page.

2. Fonts MUST be licensed. This means you may have to purchase a license to use a particular font on your web page.

<figure> and <figcaption>

The <figure> and <figcaption> elements are used to add captions to images. The purpose of a caption is to add an explanation to an image. Images and captions can be grouped together on your site using <figure> elements. The <img> element is used for the image, while the <figcaption> defines the caption to the image.

Example:

<figure>

<img src="img.png" alt=" "/>

<figcaption>Caption about Image</figcaption>

</figure>