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 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.
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.
<link href="lib/css/font-awesome.css" rel="stylesheet"/>
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.
<span class="fa fa-facebook">
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.
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.
If you want to only change the color of one icon, target its name like fa-twitter
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."
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 6: Add the font into your CSS stylesheet
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
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.
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.
<img src="img.png" alt=" "/>
<figcaption>Caption about Image</figcaption>