nelsonDev: Awesome icons with Font Awesome

Font Awesome is an "iconic font designed for Bootstrap", the font contains 369 icons divided into a few main areas: Web Application, Form Control, Currency, Text Editor, Directional, Video Player, Brands and Medical.

Icons are scalable vectors, means they look the same at any size and with high-resolution displays, no javascripts are required to work, everything is controlled by CSS, just place a icon using the tag 'i' and define it with Font Awesome classes.

You can easily embed FontAwesome in your job with one line of code via CDN:

Icons are under a OFL+MIT license, so you can use it in any HTML5 project, better if it is based on Bootstrap 3.

How the css works

Understand the naming conventions for icons:

fa-[name]-[shape]-[o]-[direction]

and for classes:

fa-[name]

Sizes:.fa-lg, .fa-2x, .fa-3x, .fa-4x, .fa-5x, .fa-fw,

Lists: .fa-ul, .fa-li

Add border: .fa-border,

Spin: .fa-spin,

Pull: pull-right, pull-left

Rotate: .fa-rotate-90, .fa-rotate-180, .fa-rotate-270,

Flip: .fa-flip-horizontal, .fa-flip-vertical,

Staked icons: .fa-stack [.fa-stack-1x, .fa-stack-2x, .fa-stack-1x, .fa-stack-2x]

Invert colors: .fa-inverse.

The base size of an icon is set in fa-lg class and is 1,3333333333 em, the 33% more of your page base font size, then the other classes: fa-2x, fa-3x, fa-4x and fa-5x resize the icon by respective em.

 fa-coffee
 fa-coffee
 fa-coffee
 fa-coffee
 fa-coffee

Add borders, spin, rotate or flip an icon.

  icon with border
 spin the icon
  rotate of 90°
  flip horizontal
  flip vertical

Moreover, it is very simple to integrate with Bootstrap, this is a sample menu:


    Home
    Posts
    Albums
    Rides
    Follow the penguin

Or with Bootstrap buttons classes, just a bit of style:

.btn-faceb {
background-color: #526da4;
border-color: #284D90;
}

.btn-faceb:hover {
background-color: #3B5998;
}

.gplus{
border:1px solid #d34836;
color:#d34836;
}

.gplus:hover{
color:#D6230E;
}

The HTML:




   Like this page



   Follow our RSS



  
  
  
  
  Follow me on G+

Make some nice effects using CSS3

Create a block, defined by a li tag, where each object inside has a ease-in-out transition of 300ms, inside the list element a span with a linear transition of 400ms.

.tr-menu{
 margin:0;
 padding:0;
}
.tr-menu li{  
    height: 150px;
    overflow: hidden;
    position: relative;
    background: #B0B0B0;
 -webkit-transition: all 300ms ease-in-out;
 -moz-transition: all 300ms ease-in-out;
 -o-transition: all 300ms ease-in-out;
 -ms-transition: all 300ms ease-in-out;
 transition: all 300ms ease-in-out;
}

.tr-menu li:hover{
    background-color: #F3F3F3;
}

.tr-menu span{
 color: #333;
 position: absolute;
    -webkit-transition: all 400ms linear;
 -moz-transition: all 400ms linear;
 -o-transition: all 400ms linear;
 -ms-transition: all 400ms linear;
 transition: all 400ms linear; 
 }

Then we can add some object and play with them, on mouse over:

an arrow rotates and highlights,
a coffee cup translates to the center, changes color, scales x3 and flips horizontal,
a cog wheel rolls to the center of the box, changes color, and scales by font-size increasing.

.myarrow-icon{
    top:40px;
    left:20px;
}

.tr-menu li:hover .myarrow-icon{
    color: #00A300;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.mycoffe-icon{
    top:0;
    left:0;  
}

.tr-menu li:hover .mycoffe-icon{
 top:50%;
 left:50%;
 color: #8A6B1C;    
 -webkit-transform: translate(-50%, -50%) scale(3,3) rotateY(180deg);
 -moz-transform: translate(-50%, -50%) scale(3,3) rotateY(180deg);
 -ms-transform: translate(-50%, -50%) scale(3,3) rotateY(180deg);
 transform: translate(-50%, -50%) scale(3,3) rotateY(180deg);
}

.mycog-icon{
 top:80%;
 left:0;
}
   
.tr-menu li:hover .mycog-icon{
 color: #A52A2A;
 font-size: 5em;
 left: -20px;
 top:10%;
 
 -webkit-transform: translate(250px) rotate(270deg);
 -moz-transform: translate(250px) rotate(270deg);
 -ms-transform: translate(250px) rotate(270deg);
 transform: translate(250px) rotate(270deg);
}

The HTML:


 Focus attention 
 
  
  
  
 
 Create amazing invitations for the coffee break
 
  
  
  
 
 Engage

Make fun alerts:
the CSS:

.dontdrive{
 text-align:left;
 font-size:1em;
 }

.driveban{
 visibility: hidden;
 opacity: 0.0;
 position: relative;
 }
 
.commercial{
 text-align:center;
 font-size:1em;
 }
 
.drink{
 /*text-shadow: 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black;*/
 text-align:left;
 font-size:1em;
 
 }
 
.fa-beer{
 /*http://www.w3schools.com/css/css3_gradients.asp*/
 background: -webkit-linear-gradient(#f1e767 0%,#feb645 55%);
 /*http://css-tricks.com/image-under-text*/
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent;
 }

some lines of jQuery:

$(document).ready(function() {
$( "#drinkandrive" ).one("mouseenter", function(e) 
{
  $( ".dontdrive span" ).animate({marginLeft:'50%'}, 2000);
  $(".driveban").css('visibility', 'visible').animate({opacity: 1.0}, 2000);
  $(".commercial").animate({'padding-top':'40px'},2000);

  $(this).animate({fontSize:'5em'}, 2000);
});
});

and the HTML:


  
    Don't drive, you have to drink :)
  


  
    
      
        
    
  
  &

See all icons in a useful printable cheatsheet: http://fontawesome.io/cheatsheet/

Site: http://fontawesome.io/
Project on github: https://github.com/FortAwesome/Font-Awesome

Download this samples code: https://github.com/orazionelson/fa-samples/

nelsonDev

Search This Blog

Saturday, 26 April 2014

Awesome icons with Font Awesome

How the css works

fa-[name]-[shape]-[o]-[direction]

Make some nice effects using CSS3

Focus attention

Create amazing invitations for the coffee break

Engage

Don't drive, you have to drink :)

1 comment: