Use Font Awesome Icon into a web page
16-05-2017    504 times
Font Awesome Icon

We can use an icon collection (call Font Awesome Icon) as per our required. It is completely free. But if you want more icons as well as some custom icon then you can use the pro version of the collection. To use the awesome icon we have to follow the following steps

  1. Open http://fontawesome.io/.
  2. Download the free version.
  3. Uncompressed at your working folder.
  4. Create an html file link the font-awesome.min.css file.
  5. Now get the name of the icons from Font Awesome Website

Basic Code to access the icons

<i class="fa fa-youtube-play"></i> youtube play icon

Tutorial at home

Control the size of the Icon

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

List Icons

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

Tutorial at home

Bordered & Pulled Icons


<i class="fa fa-quote-left fa-3x fa-pull-left fa-border" aria-hidden="true"></i>
On the Insert tab, the galleries include items that are designed to coordinate with the overall look of

.
.
.
<i class="fa fa-quote-right fa-3x fa-pull-right fa-border" aria-hidden="true"></i>

Animated Icons

<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>
<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>
<i class="fa fa-refresh fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>
<i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>
<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

Tutorial at home
Tutorial at home

Rotated & Flipped

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

Stacked Icons

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

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

<span class="fa-stack fa-lg">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
</span>
fa-terminal on fa-square<br>
<span class="fa-stack fa-lg">
<i class="fa fa-camera fa-stack-1x"></i>
<i class="fa fa-ban fa-stack-2x"></i>
</span>

We can also apply font-awesome icons in more widely in bootstrap framework.

Video Tutorials

 

softetechnologies
    Author Details
Arnab De
I have over 16 years of experience working as an IT professional, ranging from teaching at my own institute to being a computer faculty at different leading institute across Kolkata. I also work as a web developer and designer, having worked for renowned companies and brand. Through tutorialathome, I wish to share my years of knowledge with the readers.
    Related Post
  Query About the post