How To Add Icons To Buttons Using Font Awesome

In this week's tutorial, I'll be showing you how to add icons to buttons using Font Awesome–a popular icon font toolkit. Buttons are found practically everywhere on the web. They allow us to submit forms, send emails, buy items, and favorite tweets.

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.
How To Add Icons To Buttons Using Font Awesome via xopixel.com

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:

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!

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 With CSS3

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.

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

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

‘Favorite’ Button 

Favorite Button

‘Submit’ Button

The Submit Button

Leave a Reply

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