Using Font Awesome

As mentioned, the Materialize framework uses all the components and concepts from Google’s Material Design visual framework. This includes all the 900+ icons that make up the Material Icons, which is Materialize’s default icons system. Throughout the Prep 4 step, I’ve covered some of the basics of Materialize to build the front page of CBLW, and with that, I’ve been taking advantage of the Materialize Icons.

So, what’s the problem?

When you think about 900+ icons, you would think that you’ve got everything you need for your design. The only problem here is, as I’ve searched high and low on the Material Icons page, their icon set has no brand icons – icons that represent social media services like Facebook, Twitter, and so forth.

It’s a bit embarrassing to admit, but I am still finishing up the Exits section of CBLW. Building a non-PHP based Contact Form (and making it work) was hard enough. But nope, I don’t want to end it there. After all, when you want your visitors to visit your site, you want to be as accessible as you can. If the Contact Form doesn’t work for any reason, you need to give your visitors other alternative ways to contact you.

I would place my email address directly there, and of course, I will be using some of the social media services that I’m currently active on for a quick hello. I am pretty active at social media in general, but the easiest way for you to give me a quick contact is to email me directly or contact me via Twitter.

What is Font Awesome?

Font Awesome, like Material Icons, is a set of scalable vector icons that you can use, add, and customize for your websites and apps using CSS. It was originally designed for the very popular Bootstrap framework, but now anyone can use it on any web project you’re working on regardless of the framework you’re using (or if you’re building everything from scratch).

There are many ways that you can install/integrate Font Awesome to your project. In the case of CBLW, I’m only going to use only one icon (Twitter), therefore, I will be using their CDN code. In fact, I prefer using CDN codes of frameworks and important files when available in order to save space and bandwidth on my server, as well as eliminating some extra coding from my part to make it work. You can just post them in your head tag above your HTML document, then you can go ahead and use them with HTML and CSS as always.

Integrating Font Awesome to the Materialize Framework

At the bottom of the contact form in the Exits section, I’ll be adding a short info on how to visitors can contact me if the Contact Form above isn’t working properly. Here’s how it looks like:


First, I will be adding the Font Awesome CDN snippet within the head tags:

Next, I have added the quick contact info as stated on the screenshot, using both a Materialize icon (for the email address) and the Font Awesome icon (for Twitter):

And that’s it! You can check out all the icons that you can use here. Have fun with them, take advantage of them in your (future) web projects!