How To Add Icons To Buttons Using Font Awesome via

How To Add Icons To Buttons Using Font Awesome

Video (Live Stream Replay)

On Wednesday, December 28th, 2016, I held my first live stream coding tutorial via YouTube Live. It was so nice to interact with my YouTube subscribers and Blog readers. I’m looking forward to doing another live stream in the future. Feel free to watch the live stream and leave a comment below letting me know what you think and/or if you have any suggestions for future live stream videos.

Step 1 – Installing Font Awesome

To use Font Awesome, you’ll need to first link the Font Awesome CDN (Content Delivery Network) to your HTML document. First, head on over the Font Awesome website. Then, click “Getting Started” link in the top menu.
Font Awesome Getting Started

Enter your email to receive a unique Font Awesome embed code–you’ll be adding this embed code right after the <head> tag in your HTML document. Here’s what your embed code should look like:

<script src=""></script>

Step 2 – Using The Button Tag

We’ll be using the <button> tag for the buttons. In this tutorial, we’ll be creating three buttons: an ‘Add To Cart’ button, a ‘Favorite’ button, and a ‘Submit’ button. Without applying any styles, the <button> tag looks very basic. Don’t worry, we’ll be adding some cool styles to make the button look awesome!

<button>Basic Button</button>
<button class="button cart">Add To Cart</button>
<button class="button favorite">Favorite</button>
<button class="button submit">Submit</button>

As you can see in the code above, there are two classes that are applied to the three buttons. The common class that all three buttons share is .button. The classes .cart, .favorite, and .submit are all different because (1) we’ll be using CSS to apply the Font Awesome icons and (2) each button will have different icons.

Step 3 – Styling The Buttons

First, we’ll be adding styles to the class .button for all three of our buttons. Take a look at the code below to see all the styles we’ve used.

.button {
	border: 3px solid #fcad26;
	border-radius: 50px;
	color: #fcad26;
	background-color: white;
	padding: 15px 35px;
	margin: 0 10px;
	text-align: center;
	text-decoration: none;
	font-weight: bold;
	display: inline-block;
	font-size: 16px;
	cursor: pointer;
	transition: all 0.3s;

Now, we’ll be applying the :hover pseudo class to the .button class to add a nice hover effect to the buttons.

.button:hover {
	border-radius: 50px;
	background: #fcad26;
	color: #fff;

Step 4 – Adding the Font Awesome Icons

Font Awesome has over 640 icons to choose from. To add the icons to the three buttons, you’ll need to search the Font Awesome icons directory. Note that in order to add Font Awesome font icons using CSS, you’ll need to find the icons Unicode.

FontAwesome Unicode

Take a look at the code snippets below to see how to add icons for each button type:

‘Add To Cart’ Button

Add To Cart Button
.button.cart:after {
	content: '\f07a';
	font-family: FontAwesome;
	padding-left: 10px;

‘Favorite’ Button 

Favorite Button
.button.favorite:after {
	content: '\f004';
	font-family: FontAwesome;
	padding-left: 10px;

‘Submit’ Button

The Submit Button
.button.submit:after {
	content: '\f0e0';
	font-family: FontAwesome;
	padding-left: 10px;

Like this article?

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.