Creative Ways to Use Font Awesome

  Icons


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

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. 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.

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


Using Font Awesome Icons for a Login Form

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

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.

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

CSS

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.

CSS

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

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

HTML

CSS

JavaScript

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.

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

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

Build Amazing Websites with Solodev
With the Solodev Website Builder, it's faster and easier to design, build, and launch beautifully crafted websites than ever before.
Learn More

Author

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

Get started today

Join people and businesses across the globe that trust Solodev.

We never share your information with anyone. Learn more

We use cookies to provide and improve our services. By using our site, you consent to cookies.