Using simple flat-icons in your webapps

You might have started working on web pages, web apps etc and might felt the need to use brand icons, accessibility icons, different domain related icons in your project. I found an amazing set of icons Font Awesome Icons with a collection of 600+ icons at free of charge and the website comes with a search bar which you could use to find the best suitable icon as per your need.

Font awesome icons are

  1. Easy to install and use
  2. Easy to customize
  3. Easy to search for the required icon

fa-icons

How to use?

  • Get your cdn from here or customize with the steps given here and include it in your html page.
  • You can use the icon using inline tags <i> or <span> with a class name “fa fa-iconname”.
eg: <i class="fa fa-facebook"></i> or <span class="fa fa-facebook"></span>

you can add another class “fa-2x”, “fa-3x”, “fa-4x” and “fa-5x” to increase the size of the icon.

eg: <span class="fa fa-facebook fa-4x"></span>

icon-x

Want to have an icon inside your button? try this

<button> <span class="fa fa-facebook"></span> Test Button</button>

Customizing your icon

Want a circle around your icon? Try “fa-stack”

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

But if you want a white circle around a black icon then you will have to hack few css. I wrote a basic style but I’m sure you could do better than this.

i.fa, span.fa
 {
 padding: 5px 10px;
 display: inline-block;
 border-radius: 50%;
 border: 1px solid black;
 }

Hope this helps in using better/affordable/amazing icons for your projects.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s