↑ Return to WordPress Tools

T08 FontAwesome


Page no: T08

Page no: T23

 

FontAwsome is tool, which we use in every of our sites. It gives us the ability of easy integrating all the needed icons on all the elements. We can choose of more than 600 icons.

FontAwsome Overview

Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.

one font

Font Awesome webpage

One Font, 585 Icons

In a single collection, Font Awesome is a pictographic language of web-related actions.

We can choose and use one of 585 icons, which we receive with FontAwsome. We can search and use the icons from this page. 

No javascript

Font Awesome: How to include in our site

No JavaScript Required

Fewer compatibility concerns because Font Awesome doesn’t require JavaScript.

FontAwsome is build only with CSS3. No any javascripts are included. Only one single CSS file. Which is good, because we can use it on old browsers and phones, too.




infinite scalability

Font Awesome: Icons in different sizes only with css property

Infinite Scalability

Scalable vector graphics means every icon looks awesome at any size.

The icons are vector graphics. This gives us a freedom to choose the size easily. We can use icons from 1x1px to what we want.

free,as in speech

Font Awesome: Documentation and license page

Free, as in Speech

Font Awesome is completely free for commercial use. Check out the license.

Font  Awesome is free and we can include it in every one of our projects and then sell the whole projects. It is free for every usage.









CSS Control

Easily style icon color, size, shadow, and anything that’s possible with CSS.Please write how you do that, possibly with screenshots

css control

Font Awesome: How we use it in our sites. Example: snbchf.com

We can treat the icon as simple text. Aligning, font-size, color and etc. It saves us a lot of time.

perfect on retina disp.

The differences between Retina and non-Retina displays

Perfect on Retina Displays

Font Awesome icons are vectors, which mean they’re gorgeous on high-resolution displays.

Retina Displays have different pixel ratio than the normal browsers. Many of the images doesn’t look good on Retina displays. Font Awesome is supporting Retina Displays, too.





plays well with others

Bootstrap home page

Plays Well with Others

Originally designed for Bootstrap, Font Awesome works great with all frameworks.

Bootstrap is CSS framework, which help for building easily templates from scratch. Font Awesome was part of BootStrap, but now it is freely used on all sites, templates and frameworks.

 

Desktop Friendly

To use on the desktop or for a complete set of vectors, check out the cheatsheet.

Screen Reader Compatible

Font Awesome won’t trip up screen readers, unlike other icon fonts.

Some readers for blind people or e-readers have problems with icon fonts, but Font Awsome is designed for Readers, too.

 

FontAwesome bugs

It is important to know that FontAwesome can be opened only by the domain of the site. When we use CDN, we have to setup the FontAwesome to be opened by the domain, not via the CDN urls.

See more for Tools