This article explores some of the many ways you can use Font Awesome on your website in a creative and customizable way. Font Awesome is the go-to toolkit for icons on the web, offering a wide range of icons for a wide range of uses, all of which can be customized to meet the needs of your web development project. In this article, we’ll cover using Font Awesome with forms, button groups, as well as resizing icons and changing their colors.

The following are the requirements for HTML, CSS, and JavaScript.

Before using the following examples, it is important to include the Font Awesome CDN on any web page where you want to use Font Awesome icons. Just copy and paste the reference below and include it on your web pages 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]

Use of 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 output should appear as shown below.

Using Font Awesome icons in a button group

In this example, we are using Bootstrap button sets 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 change their size. The following code shows you exactly how to change the size and color of 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 output should appear as shown below.

Changing Font Awesome Icon Colors

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

HTML

Below is the HTML code for the Font Awesome icon with the added class “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 .red class, 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 output should appear as shown below.

Awesome use cases from common sources

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

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

[/code]

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

Inference

Using a set of custom icons on your website is a great way to increase customer engagement. With a set of predefined icons like Font Awesome, you can save time and your appearance.

I hope this article results helpful and no guy in sharing your suggestions and comments below.

+ posts

Similar Posts