How to Use FontAwesome Icons to Style Your Contact Information

Using icons in the contact information section is a great way to add help the users instantly find the specific contact information they're looking for. Visual elements are easier to understand, and they make a great addition to the text information. In this tutorial, we'll show you how to use FontAwesome to make the contact information section more user-friendly and more stylish. FontAwesome is a popular icon toolkit that offers a very wide variety of icons. Since it is easy to use and highly customizable, it can be used in many ways in a web development project.

Also, we recommend checking out our other tutorials on using FontAwesome:

• How to Add Font Awesome Icons to Your Input Fields
• How to Add a List of Features with Corresponding Font Awesome Icons
• How to Use Bootstrap Columns to Create a Stacked List of Features

Getting Started

We'll be using Bootstrap and FontAwesome in our project so go ahead and but the CDN links below in the head section of your project's HTML file:

HTML

The HTML code structure below includes a sample profile, short bio, and a profile picture. Feel free to customize it. The contact information is inside a side column. Each contact item is inside a div container containing an i tag for the FontAwesome icon and contact information text. The .fa and .fas prefixes are FontAwesome classes. The other classnames to pay attention to are the .d-flex and .align-items-center classes. These are built-in Bootstrap classes. The .d-flex class makes the containers display as flexbox while .align-items-center is a flexbox property that makes the elements inside a flexbox container align vertically centered. This is important because it makes both the icons and text inside the div container align vertically without having to write additional CSS styles.

CSS

Since we handled most of the layout adjustments with Bootstrap's built-in classes in the HTML file, The CSS code below mostly fixes the margin and font-sizes of the icons. Sometimes, FontAwesome icons can look bigger or smaller than others even though you give all of them a specific font-size. In these cases, you should choose the icons individually and set different font-sizes for them. Finally, make sure that you allow a proper distance between the icon and the contact text. We did this below by giving all icons a 20px right margin value:

And there it is. Check out the JSFiddle below to see how the contact information section looks before committing to its use: