Monthly Archives: January 2015

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

As they Say, “Hello World”

I read a poem today that started with the image of a mop : past grime and then joyful transgressions in online space.

This week I started at HackerYou. This week I started at a BOOT-CAMP; I got so pleased to be getting serious about being a front-end web developer. That was five days ago and the feelings of excitement and optimism are only intensifying. My twitter says : Lisa Folkerson :: Front-End Web Developer. A new declaration and addition to the long-suffered : Lisa Folkerson :: Conceptual Artist.

HackerYou’s full-time front end development bootcamp seems like this beautiful island of time and support. I can’t remember the last time in my life I had just one job to do. I’ve spent the last ~7 years juggling multiple contracts, part-time and full-time jobs,  creative projects, and participating in my communities as artist, organizer, musician, fan, friend, and supporter. 15 hour days have been a minimum unless I’m playing hookey and feeling my one long eye drag through my loaf to pain me with visions of misst work.

The last six months have been wildly productive for me and I couldn’t be more pleased that the next nine weeks plus will be filled with making things, talking about making things, learning how to share what I make and involve myself in a new culture; dev culture.

The first share is what I worked on this week and what I finished this week. A. the website you are reading this blog post on, (as soon as this wordpess is updated to the site I have built line online this sentence will be true)and B. two music transmissions I made for the artist Castle If. They went live on the web this week and were my last pre-HackerYou project to wrap before focusing intently on coding for the next little future. I am so excited to work with the brilliant Castle If and her rapturous music. I am to grateful to the Mendel Art Gallery for their support in this project and being the first to screen it at their amazing party Lugo Gold.