Icons work well for illustrating actions a user can take in an application. There are several icon libraries readily available. Here are a few of the many:
- Font Awesome – https://fontawesome.com/
- Flaticon – https://www.flaticon.com/
- Material Design Icons – https://material.io/resources/icons/
There are certainly many more than mentioned above, but the goal of this guide is to show you how to utilize one of the above libraries for your project and target it to control the style. Besides,once you learn the process for one library, it’s very similar for others.
In this article, we’ll use the Font Awesome Icon Library. In the editor below, take notice of the <link> in the head of the HTML document. This is a minified CSS file that basically references Font Awesome’s library of icons. “Minified” basically refers to the fact that all the whitespace is gone – so there really isn’t any formatting.
As long as you have this content delivery network – CDN – in the <head>, you’ll be able to access almost all of Font Awesome’s free library. There is a SVG library as well, but we’ll get into that when we talk more about JavaScript.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Icons</title>
<style>
.icon-container {
font-size: 24px;
}
.fab {
font-size: 3rem;
color: #1DA1F1;
}
.fa-heart {
font-size: 4rem;
color: crimson;
}
</style>
</head>
<body>
<!-- Icons will go here -->
<div class="icon-container">
<i class="fab fa-twitter"></i>
<span class="fas fa-camera"></span>
<span class="fas fa-heart"></span>
</div>
</body>
</html>In the editor above, you’ll see in the body that we have two inline elements, an <i> and a <span> element. Either way is a valid way to write out icons in your markup. I’ve personally seen <i> used the most, but I’ve also seen <span> on the rare occasion.
You’ll see that the contents of the element are empty. The class attribute is how we pull the icon we need from Font Awesome’s library using the CSS file we inserted into the head of the HTML file.
If you’d like to take a look at the CSS file to see what you’re working with, you can certainly do that. It’ll give you a wall of text though, so it might be a bit overwhelming. Just know that it has all the information you need to insert free icons into your project.
The class name of the icon has two parts: the style prefix and the icon name. In the example above, we see “fab” and “fas”. The “fa” stands for font awesome, the “b” stands for brand and the “s” stands for solid. There are other prefixes as well, but these require a PRO account.
The icon name can be found when you are perusing the icons gallery on Font Awesome’s website. It will usually follow the convention you see above: “fa-<name of icon>”.
Icons are to be treated like inline elements when styling them and controlling their position on the page with CSS. For more information about styling Font Awesome’s icons, please see their docs, which are really straightforward and will help you get some practice in reading documentation. An example of styling using CSS is in the editor above.
Feel free to use the sandbox environment above to play with icons and start styling them!
About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.
