Font Awesome Icons as Active Links and Building an Image-Based Navigation Bar

This is the first post of what I am sure will be a series wherein I run into problems, have trouble solving them easily through google, and look to lay out solves for problems others may run into as well as myself.
Of course everyone may be more clever than I in lots of the aspects I talk about. Marvellous. Let’s talk. Especially if someone wants to add to/amend what I’ve written.
This style of blog post was recommended to me and my cohort by the wonderful mentors at HackerYou.

Font Awesome is a free service that is the most popular of its type of service; it makes images into icons and provide them free for use in web and design as vector images. Because they act like a font they are vector images and can be easily sized up or down by changing the font-size attribute in CSS. It can be ridiculous and it can be fun and there are lots of ways to put the Font Awesome library to creative use.

A few things to note about Font Awesome and icons acting as text:
-they are icons that are not added in the markup as a unique element but rather added as a class to another element.
-they are not readable by a screen reader. Discussion of the effects of this and overcoming that found here and here. Please try to make your site accessible by including these suggestions in your markup, although I have not included those strategies here for clarity’s sake .

You would think you could use them as a link rather easily. As soon as I saw them it was like they were begging me to make them into a beautiful and sleek little navigation bar. That twitter birdie next to a gmail icon, next to the vimeo ‘v’ and that old github cat.
My first instinct was to set up a nav, with the different icons linking externally as <li> elements, giving the <li> tags the class for the Font Awesome icons. A note, the classes beginning with fa in the examples are required by Font Awesome to correctly display them. Usage example and potential for Font Awesome can be found starting here.

 <li class="fa fa-twitter"> 

but immediately upon wrapping the <li> in a set of <a> tags the icon disappears.

<section><ul class="fa-ul"><li><a href="https://twitter.com/lisafolkerson" class="fa fa-twitter"></a></li></ul></section>

However the link is not the same size as the element it’s contained by. In fact this adds a strange space that is the link directly beside the icon, which is acting more like the bullet-point on an <li> item. Font Awesome works phenomenally well as bullet points in a list that exist beside text to further the understanding or give an expanded design of list. Resetting the font so that it can be used as the selctor itself and standing boldy alone can be remedied with an amount of CSS.

Following code makes a circle radius around the Font Awesome icon, the link, and places the active area inside a border.

section {
position: relative;
}

ul {
border:0;
margin: 0 auto;
}

ul li {
height: 70px;
width: 70px;
border-radius: 50%;
border: 1px solid black;
display: inline-block;

}

ul a{
margin: 0;
padding: 0;
width: 100%;
display: block;
position: absolute;
left: 0;
top: 0;
height: 100%;
line-height: 70px;
border-radius: 50%;

}

A few necessary things are required to make the navigation function cooperatively:

i. Display settings must be customized on the <a> element and the <li> element. The <a> is set to display as a block element and the <li> as an inline-block element.

ii. Position. <a> must position absolute and of course, it’s parent, <section> must be relative to contain its child.

iii. <li> Set the height and width. to what the desired final result will be.

iv. Margin/padding set to 0 of the <a> element. This ensures limiting the <a> to only be displayed to exactly the same size and dimensions as the <li> element, also position the top and left sides of the <a> to be 0,0. Then describe its width as 100%

v. Border radius set to 50% will turn the selectable area into a circle.

Et, voilà

FA _ Nav Bar Demo

Bonus: adding a hover tag is a very classy next step for this style of navigation bar.

FA-_-Nav-Bar-Demo-_-Gif

This entry was posted in Uncategorized. Bookmark the permalink.

One thought on “Font Awesome Icons as Active Links and Building an Image-Based Navigation Bar”

  1. First of all, congratulations on the aiznmag blog!I am merely getting started at Audio Branding, and after reading several different definitions of what is included in the management of a brand’s sonic identity, I must ask: Don’t you think that all acoustic interactions with the product/service are relevant to a brand, hence should be carefully thought out and purposefully applied from ground up?if it’s a product rather than a service, for instance. Shouldn’t the sonic experience of opening the product up, of pulling off the lid, or cutting, ripping the package be seriously taken into account? The sounds that the product makes are of great importance in the consumer’s process of brand perception and significancy of brand experience from the purchase to recall. Typing on a Mac keyboard, or even the sonic feeling of a MacBook in your hands after unpacking It surely sounds different than a Dell keyboard or notebook even when both are turned off. Am I being absolutely nonsensical, or just poorly articulated? I haven’t seen much discussion about these matters, and I can’t distinguish a particular place for this in the responsibilities of an Audio Branding Manager from what I have read so far. Does this matter in audio branding literature? Where would it fit in the process, nevertheless, in this glossary?I would very much appreciate your thoughts on this subject.thanks in advance for the attention and patience

Leave a Reply

Your email address will not be published. Required fields are marked *