How to use Font Awesome, The Easy Way

Here’s a How-to with some simple HTML/CSS snippets you can use in your website to place a Font Awesome icon in front of text inside a <span>.

This is basically what I needed to create:

Here is the basic HTML setup:

<span class="fa-icon">
    <i class="fas fa-fire"></i> Your Text Here
</span>

Replace fa-fire with the icon you want from Font Awesome.

Here is the basic CSS to include:

.fa-icon {
    display: inline-flex;
    align-items: center;
    gap: 8px; /* Adjust spacing between icon and text */
}

.fa-icon i {
    font-size: 1em; /* Adjust icon size */
    color: #ff6600; /* Adjust icon color */
}

CSS can be added to HTML documents in 3 ways:

Inline - by using the style attribute inside HTML elements
Internal - by using a <style> element in the <head> section
External - by using a <link> element to link to an external CSS file'

You can use this bit of code to load the CSS across your website, by making sure it’s loaded in the head of your HTML page:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">

Why Font Awesome you might ask, well they look cool, they’re free and SUPER easy to use. The license for Font Awesome is as follows: Font Awesome is fully open source and is GPL friendly. You can use it for commercial projects, open source projects, or really just about whatever you want.

As you can see, they have a ton of icons and they look nice!

There you go, hope this can help someone out there. 🙂

Here’s a CodePen Pen where you can snag the code as well:

See the Pen Untitled by Gene Crawford (@genecrawford) on CodePen.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Time limit exceeded. Please complete the captcha once again.

More News & Articles

How CX (Customer Experience) Can Combat Customer Churn

How CX (Customer Experience) Can Combat Customer Churn

A seamless customer experience (CX) can reduce churn and boost retention. Discover essential design strategies that transform frustrating user journeys into engaging, personalized experiences that build loyalty and trust.

Is Graphic Design Dead?

Is Graphic Design Dead?

Graphic design isn’t dead, it’s evolving. Inspired by a Threads post, this piece dives into the art vs. design debate, AI’s impact, and why selling your value matters.

EMAIL NEWSLETTER