how to use font-awesome icon in html

how to use font-awesome icon in html

After you get up and running, you can place Font Awesome icons just about anywhere with the <i>tag. Some examples appreciatively re-used from the Bootstrap documentation.

fa-camera-retro

You can place Font Awesome icons just about anywhere using the CSS Prefix fa and the icon’s name. Font Awesome is designed to be used with inline elements (we like the <i> tag for brevity, but using a <span> is more semantically correct).

<i class="fa fa-camera-retro"></i> fa-camera-retro
  • If you change the font-size of the icon’s container, the icon gets bigger. Same things goes for color, drop shadow, and anything else that gets inherited using CSS.

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

<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x
  • If your icons are getting chopped off on top and bottom, make sure you have sufficient line-height.

752 total views, 2 views today

Related Posts

how to use html5 videos in our website
How nth-child Works
CSS Transition
Loading Facebook Comments ...

2 Comments. Leave new

This is a comment to the admin. Your Freelancing Design Download & Design and develop themes for joomla, wordpress, html5 , css3, responsive, free download, purchase template less price more options, powerful responsive customization from admin end. easy to customize. website is missing out on at least 300 visitors per day. I have found a company which offers to dramatically increase your visitors to your site: http://klick.onl/Z They offer 500 free visitors during their free trial period and I managed to get over 15,000 visitors per month using their services, you could also get lot more targeted visitors than you have now. Hope this helps :) Take care.

Reply
Long eyelashes
March 23, 2015 2:45 pm

Hi there! I know this is somewhat off topic but I was wondering which blog platform
are you using for this website? I’m getting fed up of
Wordpress because I’ve had issues with hackers and I’m looking
at alternatives for another platform. I would be awesome if you could point me in the direction of a good platform.

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Enter the captcha code *

Please wait...

Subscribe to our newsletter

Want to be notified when our article is published? Enter your email address and name below to be the first to know.

Coupon Code "HAPPY10" - Get Discounts upto 90% + 10% off on Purchase of themes/templates and Plugins