How to Use FontAwesome Icons to Style Your Contact Information


Basic contact information can help support a contemporary web design with some key place FontAwesome icons.

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:

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:

Author

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