Add icons to your website with Font Awesome

What is it

Font Awesome is a Icon font. It’s just a font. But instead of containing letters or numbers, they contain useful icon such as Brand icon and Navigation icon.

Example

When you are lazy but still want to have a beautiful website logo. Let’s use Font Awesome!

In less than a minute, your website got a new logo.

Font Awesome Icon with CSS applied

Pros

• Free — Use at no costs or pay more to get Font Awesome Pro
• No JavaScript Required — Fewer compatibility concerns
• Infinite Scalability —Scalable vector graphics (SVG) means every icon looks awesome at any size

Cons

• Single Color — or you need apply some CSS tricks
• Simple image — Font Awesome do not contains only complex image

How to use

First, add Font Awesome to your website

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

Then add <i class="fa fa-xxxxxx"></i> replace xxxxxx with icon name.You can find an icon name at http://fontawesome.io/icons/.

For example

<h2>
<i class="fa fa-puzzle-piece"></i>
โจทย์ใหม่
</h2>

Result will look like this

Ref : https://www.kickstarter.com/projects/232193852/font-awesome-5