The Iconic Font and CSS Toolkit – FontAwesome

0
747
FontAwesome – The iconic font and CSS toolkit gives you a platform to use hundreds of icons on your website and desktop. It is the pictographic language of web-related actions and based on CSS and LESS. Dave Gandy is the developer who puts his lots of time on this beautiful font. He decided to give it to the open source community.

It is basically a font which contained hundreds of icons and very easy to integrate to the web platform. It loads very fast than image or icons and can be easily change with some css and html code. Lets us show you how to get started with it and how to use it with its all features to make your design a beautiful art.

Some feature of FontAwesome

  • This font contains 675 different icons in a single collection and gradually upgrading its collections.
  • Anyone can use this font for commercial and non-commercial purpose.
  • FontAwesome icons are vectors which makes the icons glass clear on high resolutions display.
  • Every icon looks at awesome at every size.
  • No javascript needed for this and it works great with all frameworks.
  • You can change the icons to any color and any size, also can add many css effects to make it more awesome for your website.

So lets know how we can use this font to make a website an iconic, beautiful and Awesome.

FontAwesome use BootstrapCDN to give you a quick and easiest way to get start with its font. To use this font you have to add its css into your code.

Note: No downloading or installation is required!

BootstrapCDN: https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

Cloudflare CDN: https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css

Add the following line as your requirement in HTML, PUG, HAML to start with FontAwesome.

HTML:

<link href=”https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css” rel=”stylesheet”>

PUG:

link(href=”https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css”, rel=”stylesheet”)

HAML:

%link{href: “https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css”, rel: “stylesheet”}

How to use FontAwesome icons in HTML

To use the Font Awesome icons, add the following line inside the <head> section of your HTML page:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

You place Font Awesome icons by using the prefix fa and the icon’s name.

Example

The following code:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

<i class="fa fa-car"></i> Car
<i class="fa fa-car" style="font-size:48px;"></i> Large Size(48px) Car
<i class="fa fa-car" style="font-size:60px;color:red;"></i> Large Red Car

</body>
</html>

Results in:

Car
Large Size(48px) Car
Large Red Car

Larger icons

The fa-lg (33% increase), fa-2x, fa-3x, fa-4x, or fa-5x classes are used to increase the icon sizes relative to their container.

Example

The following code:

<i class="fa fa-car fa-lg"></i>
<i class="fa fa-car fa-2x"></i>
<i class="fa fa-car fa-3x"></i>
<i class="fa fa-car fa-4x"></i>
<i class="fa fa-car fa-5x"></i>

Results in:





Bullet Icons

You can disable default bullets in unordered lists by using fa-ul and fa-li classes.

Example

The following code:

<ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square"></i>List icons</li>
  <li><i class="fa-li fa fa-spinner fa-spin"></i>List icons</li>
  <li><i class="fa-li fa fa-square"></i>List icons</li>
</ul>

Bordered and Pulled Icons

The fa-border, fa-pull-right or fa-pull-left classes are used for for pull quotes or article icons.

Example

The following code:

<i class="fa fa-quote-left fa-3x fa-pull-left fa-border"></i>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Animated Icons

The fa-spin class gets any icon to rotate, and the fa-pulse class gets any icon to rotate with 8 steps.

Example

The following code:

<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-circle-o-notch fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>
<i class="fa fa-spinner fa-pulse"></i>

Results in:





Rotated and Flipped Icons

The fa-rotate-* and fa-flip-* classes are used to rotate and flip icons.

Example

The following code:

<i class="fa fa-shield"></i>
<i class="fa fa-shield fa-rotate-90"></i>
<i class="fa fa-shield fa-rotate-180"></i>
<i class="fa fa-shield fa-rotate-270"></i>
<i class="fa fa-shield fa-flip-horizontal"></i>
<i class="fa fa-shield fa-flip-vertical"></i>

Stacked Icons

To stack multiple icons, use the fa-stack class on the parent, the fa-stack-1x class for the regularly sized icon, and fa-stack-2x for the larger icon.

The fa-inverse class can be used as an alternative icon color. You can also add larger icon classes to the parent to further control the sizing.

Example

The following code:

<span class="fa-stack fa-lg">
  <i class="fa fa-circle-thin fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x"></i>
</span>
fa-twitter on fa-circle-thin<br>

<span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span>
fa-twitter (inverse) on fa-circle<br>

<span class="fa-stack fa-lg">
  <i class="fa fa-camera fa-stack-1x"></i>
  <i class="fa fa-ban fa-stack-2x text-danger" style="color:red;"></i>
</span>
fa-ban on fa-camera

Fixed Width Icons

The fa-fw class is used to set icons at a fixed width. This class is useful when different icon widths throw off alignment. Especially useful in Bootstrap’s navlists and list groups.

Example

The following code:

<div class="list-group">
  <a href="#" class="list-group-item"><i class="fa fa-home fa-fw"></i> Home</a>
  <a href="#" class="list-group-item"><i class="fa fa-book fa-fw"></i> Library</a>
  <a href="#" class="list-group-item"><i class="fa fa-pencil fa-fw"></i> Applications</a>
  <a href="#" class="list-group-item"><i class="fa fa-cog fa-fw"></i> Settings</a>
</div>

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.