Skip to main content

Explore your training options in 10 minutes

How to Insert Icons Using a CDN

Christina Kopecky - December 29, 2020

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:

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.

Get offers and scholarships from top coding schools illustration

Find Your Bootcamp Match

  • Career Karma matches you with top tech bootcamps
  • Access exclusive scholarships and prep courses

By continuing you agree to our Terms of Service and Privacy Policy , and you consent to receive offers and opportunities from Career Karma by telephone, text message, and email.

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">
       <link rel="stylesheet" href="">
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
           .icon-container {
               font-size: 24px;
           .fab {
               font-size: 3rem;
               color: #1DA1F1;
           .fa-heart {
               font-size: 4rem;
               color: crimson;
       <!-- 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>

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.

What's Next?

Christina Kopecky

About the author: Christina is an experienced technical writer, covering topics as diverse as Java, SQL, Python, and web development. She earned her Master of Music in flute performance from the University of Kansas and a bachelor's degree in music with minors in French and mass communication from Southeast Missouri State. Prior to joining the Career Karma team in June 2020, Christina was a teaching assistant, team lead, and section lead at Lambda School, where she led student groups, performed code and project reviews, and debugged problems for students. Christina's technical content is featured frequently in publications like Codecademy,, and Educative.

Skip to main content