Search This Blog

Saturday 26 April 2014

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:
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

But if you want try and hack it download the package in your web root and just link the html to the css with a relation in the <head>.

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:

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:

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/

Posted by at
Labels: , , , , , , , , , , , , , ,

1 comment:

Subscribe to: Post Comments (Atom)