Platform
- CMS
- AI
- Cloud
- Metaverse
- Mobile
- Blockchain
- Digital
- IoT
Pricing
Developers
Enterprise
About Us
Contact

Creative Ways to Use Font Awesome

This article explores some of the many ways you can use Font Awesome on your website in creative and customizable ways.

This article explores some of the many ways you can use Font Awesome on your website in creative and customizable ways. Font Awesome is the go-to toolkit for icons on the web as they have a vast array of icons for a wide range of uses, all of which can be customized to suit the needs of your web development project. In this article we will cover using Font Awesome with forms, button groups, as well as resizing icons and changing their colors. In our final example, Solodev will show you how to use Font Awesome to add a loading icon triggered by basic JavaScript.

Below is the HTML, CSS, and JavaScript required.

Before using the examples below it is important that you include the Font Awesome CDN in any web page where you intend to use Font Awesome icons. Simply copy and paste the reference below and include it in your web page(s) to activate Font Awesome.

[code]
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

[/code]

For the purposes of this tutorial you will also need to include Bootstrap CSS and JavaScript

[code]
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

[/code]

Using Font Awesome Icons for a Login Form

You can use the code below to create a login form with Font Awesome icons.

[code]
 <div class="row">
      <div class="col-md-6">
         <div class="panel panel-default">
            <div class="panel-heading">
               <h3 class="panel-title">Login</h3>
            </div>
            <div class="panel-body">
               <div class="input-group">
                  <span class="input-group-addon" id="basic-addon1"><i class="fa fa-user" aria-hidden="true"></i>
                  </span>
                  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
               </div>
               <div class="input-group">
                  <span class="input-group-addon" id="basic-addon2"><i class="fa fa-key" aria-hidden="true"></i>
                  </span>
                  <input type="text" class="form-control" placeholder="Password" aria-describedby="basic-addon2">
               </div>
            </div>
         </div>
      </div>
   </div>

[/code]

Note: If you used the code above and followed the instructions above the result should appear as it does below.

Using Font Awesome Icons in a Button Group

In this example we use Bootstrap Button Groups and Font Awesome Icons to create a navigation element for a web page.

[code]
<div class="btn-group btn-group-lg btn-group-justified" role="group" aria-label="Actions">
      <a class="btn btn-default dashboard-shortcut" ><span class="fa fa-list" aria-hidden="true">&nbsp;List</span></a>
      <a class="btn btn-default dashboard-shortcut" ><span class="fa fa-th" aria-hidden="true">&nbsp;Grid</span></a>
      <a class="btn btn-default dashboard-shortcut" ><span class="fa fa-calendar" aria-hidden="true">&nbsp;Calendar</span></a>
</div>

[/code]

Note: If you used the code above and followed the instructions above the result should appear as it does below.

Resizing Font Awesome Icons

Not all icons need to be the same size and depending on where you're displaying them, you may want to modify their size. The code below shows you exactly how to resize and color your Font Awesome icons.

HTML

[code]
<i class="fa fa-facebook-square fa-large" aria-hidden="true"></i>
<i class="fa fa-linkedin-square fa-2x" aria-hidden="true"></i>
<i class="fa fa-twitter-square fa-3x" aria-hidden="true"></i>
<i class="fa fa-google-plus-square fa-4x" aria-hidden="true"></i>
<i class="fa fa-pinterest-square fa-5x" aria-hidden="true"></i>

[/code]

CSS

[code]
.fa-facebook-square {
  color: #3b5998;
}
.fa-linkedin-square {
  color: #1985bc;  
}
.fa-twitter-square {
  color: #1da1f2;  
}
.fa-google-plus-square {
  color: #db4437  
}
.fa-pinterest-square {
  color: #bd081c;  
}

[/code]

Note: If you used the code above and followed the instructions above the result should appear as it does below.

Changing Font Awesome Icon Colors

Changing the colors of your icons is a necessary skill as they all come in default black or white. Below is an example of a Font Awesome icon with a modified color from black to red using CSS.

HTML

Below is the HTML for the Font Awesome icon with the added class of 'red' so you can change the color using CSS.

<i class="fa fa-users red" aria-hidden="true"></i>

[/code]

CSS

Now that your Font Awesome Icon has the class .red you can change the color and size using the CSS below.

[code]
.red {
  font-size: 50px;
  color: 	#8B0000;
}

[/code]

Note: If you used the code above and followed the instructions above the result should appear as it does below.

Animating Font Awesome Icons to onClick Events

Font Awesome Icons can be used in interactive web applications. In the example below we use Font Awesome as a loading icon that populates when clicking the button.

Note: You will need to include jQuery if you intend to use this example. To do so, simply place the include below in between the header tags of your web page

[code]
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

[/code]

HTML

[code]
<button class="btn btn-default has-spinner">
   <span class="spinner">
       <i class="fa fa-circle-o-notch fa-spin"></i>
   </span> Get Started
</button>

[/code]

CSS

[code]
.spinner {
  display: inline-block;
  opacity: 0;
  width: 0;
  -webkit-transition: opacity 0.25s, width 0.25s;
  -moz-transition: opacity 0.25s, width 0.25s;
  -o-transition: opacity 0.25s, width 0.25s;
  transition: opacity 0.25s, width 0.25s;
}
.has-spinner.active {
  cursor:progress;
}
.has-spinner.active .spinner {
  opacity: 1;
  width: auto; /* This doesn't work, just fix for unkown width elements */
}

[/code]

JavaScript

[code]
$(function(){
    $('.has-spinner').click(function() {
        $(this).toggleClass('active');
    });
});

[/code]

Note: If you used the code above and followed the instructions above the button should appear as it does below after being clicked.

Common Font Awesome Use Cases

Below are some common Font Awesome use cases for form fields.

[code]
 <div class="input-group">
      <span class="input-group-addon" id="basic-addon2"><i class="fa fa-phone" aria-hidden="true"></i>
      </span>
      <input type="text" class="form-control" placeholder="Phone #" aria-describedby="basic-addon2">
   </div>
   <div class="input-group">
      <span class="input-group-addon"><i class="fa fa-usd" aria-hidden="true"></i>
      </span>
      <input type="text" class="form-control" placeholder ="00.00">
      <span class="input-group-addon">.00</span>
   </div>
   <div class="input-group">
      <span class="input-group-addon" id="basic-addon3"><i class="fa fa-globe" aria-hidden="true"></i>
      </span>
      <input type="text" class="form-control" placeholder="https://www.domain.com">
   </div>

[/code]

Note: If you used the code above and followed the instructions above the result should appear as it does below.

Demo on JSFiddle Download from GitHub

Utilizing a custom icon set to your website is a great way to enhance customer engagement. By using a preset icon set like Font Awesome you can save and

With the Solodev Website Builder, it's faster and easier to design, build, and launch beautifully crafted websites than ever before.

Learn More

Download from Github

Share on Facebook Tweet It

Scott Madara
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

Sign up to explore

Create an account in seconds and start building today.

Sign up for Solodev