Creating a Contact Card with Bootstrap and Font Awesome

logo-fontawesome

 

The days of plugins are upon us. It is truly the best of times and the worst of times. That’s overly dramatic but here’s the crux of the matter; often times it seems easier to download and integrate a plugin for small things. Often times we like a one size fits all solution when we often overlook the tools already available to us. On my blog I use a custom made contact bar where I have some icons representing the various methods that I can be reached. I used a simple tools that are most likely already in your website.

I use bootstrap to scaffold out my website and with that are some awesome tools for making buttons. I used them to remake my navigation bar. There are however some distinct missing factors, most notably a missing bit of icons for social media sites. That’s where we have an awesome library know as Font Awesome come in and help us.

I mention bootstrap at first because I love it, and Font Awesome plays well with Bootstrap. They should the good folks at Bootstrap actually host a CDN where Font Awesome can be found. Which brings us to the first part of today’s lesson:

How to include Font Awesome into your Awesome Projects

 

The Font Awesome Website gives you a lot of ways to include their library in your site. You can download the Ruby Gem for those who have Rails projects. You also have the ability to customize it with LESS or SASS. Today we use the simplest way. We add a little bit of code into our Header file:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

Doing so adds both the Bootstrap Library and Font Awesome. That way we have the background stuff we don’t want to worry about since Bootstrap will take care of it.

Creating the Contact Bar

 

We now turn to the HTML to make our bar. Where you want the bar to reside type out the following code:

<article class="inner-bar col-md-3">
     <aside>
          <h3>Other Ways to reach me</h3>
          <a href="mailto:geo.offley@gmail.com"><span><i class="fa fa-envelope-square fa-5x"></i></span></a>
          <a href="https://github.com/georGEO1989"><span><i class="fa fa-github-square fa-5x"></i></span></a>
          <a href="www.linkedin.com/pub/george-offley/32/ba9/9a9/"><span><i class="fa fa-linkedin-square fa-5x"></i></span></a>
          <a href="https://www.facebook.com/george.offley"><span><i class="fa fa-facebook-square fa-5x"></i></span></a>
          <a href="https://www.google.com/+GeorgeOffley"><span><i class="fa fa-google-plus-square fa-5x"></i></span></a>
     <aside>
</article>         

Now we use the grid system within Bootstrap to make our box the size we need. Font Awesome comes in on the i tag. Like Bootstrap it is simply a matter of adding a class to an i tag and the CSS that is in included will do the work for us. I wrap it in a span and an href so that the whole icon area acts as the link.

There are different sizes that can be utilized to create different experiences. I used fs-5x to make the icons a little bigger out of respect for those with smaller screens. There are hundreds of icons to choose from, I chose to use the ones I needed to add the links for all the social sites for my contact page to make sense. There are thousands of combinations that can utilized and they can all be done by simply change some CSS classes. How simple!

The CSS

 

Easiest part there is, I only added a tiny bit to make the box standout:

.inner-bar {
  background-color: #efefef;
  border-radius: 10px;
  text-align: center;
}

Below should be the final result:

See the Pen Font Awesome Demo by George Offley (@georGEO1989) on CodePen.

Conclusion

 

In conclusion, Font Awesome is for lack of a better word: Awesome!. It make life so much easier when you want to throw something simple like a contact box together with only little effort. Please comment below for suggestions or other ways to make your website awesome with Font Awesome!

 

1 reply

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply