Font Awesome is Really Awesome

The web’s most popular icon set and toolkit

Posted by LiuShuo on September 26, 2018

Font Awesome

Font Awesome is a website provides free icons.

Get vector icons and social logos on your website with Font Awesome, the web’s most popular icon set and toolkit.

font-awesome-collection

The latest version is 5.3 and it has 1,341 Free Icons and 2,637 Pro Icons for business usage.

How To Add Icons

To insert an icon, add the name of the icon class to any inline HTML element.

The <i> and <span> elements are widely used to add icons.

All the icons in the icon libraries below, are scalable vector icons that can be customized with CSS (size, color, shadow, etc.)

To use the Font Awesome icons, add the following line inside the <head> section of your HTML page:

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

Add Wexin Icon

I want to add Wechat Icon to my blog and share my account QR code with public, just add the following to my footer:

1
2
3
4
<span class="fa-stack fa-lg">
    <i class="fa fa-circle fa-stack-2x"></i>
    <i class="fa fa-wechat fa-stack-1x fa-inverse" style="color:#1fb922"></i>
</span>

Now let’s see how it looks in my site footer-icons

Reference

  • https://fontawesome.com
  • https://www.w3schools.com/icons/default.asp

本文首次发布于 LiuShuo’s Blog, 转载请保留原文链接.