Skip to content

Icons

Tiny images that are treated like text

  • Lesson
  • 1 min read
  • 4 of 8 in this chapter

Links1

Adding Font Awesome Icons

To add icons, you need an icon library. We're going to use Font Awesome (it's free, but you do need to make an account. If you don't really feel like doing that, feel free to skip this lesson).

First, go to fontawesome.com/start. Provide your email, and follow the instructions to access your account. Once you get to the page with "Your Kits" in the center, copy the script tags. Paste this link in the head of your html document, and you can now use Font Awesome icons in your document.

To search available icons, go to the "Icons" link at the top of the Font Awesome website. Once you find the icon you like, click on it, and then click on "Start Using This Icon". Copy the i (icon) tag provided and paste it into the body of the HTML document. Here's an example:

HTML
<i class="fas fa-file-code"></i>

CSS for Icons

Icons look like images, but are often treated like text. In CSS, the size and color of an icon can be changed just like that of text. Here's an example:

CSS
i {
    font-size: 100px;
    color: green;
}