add font awesome text icon

How to Add Font Awesome text icon

Font Awesome is Light Weight Unicode based text icon. Its super-fast loading speed doesn’t harm site SEO result and as vector shape text icon, you can change outlook of any icon using css Rules. To add or enqueue font awesome text icon, here are some great steps to follow.

Add Font Awesome Text Icon – LOCAL or CDN

You can add font awesome text icon from local or content delivery network (CDN). Local means to load font awesome text icon from own web server and on the other hand CDN means, load font awesome text icon from other web servers such MaxCDN.


Add Font Awesome Text Icon – LOCAL

  • Download Font Awesome Text Icon here
  • Unzip or Extract downloaded folder,
  • Copy Font Awesome folder to root folder of html files,
  • Open html file with editor,
  • Add this below code inside html <head> tag,
<link rel="stylesheet" href="font-awesome-4.6.2/css/font-awesome.min.css" media="all">
  • Save it and upload to server.

Add Font Awesome Text Icon – Content Delivery Network (CDN)

  • Open html file with editor,
  • Add this below code inside html <head> Tag,
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css">
  • Save it and upload to server.

Add Font Awesome Text Icon in WordPress – LOCAL

  • Download Font Awesome here
  • Unzip or Extract downloaded folder,
  • Copy Font Awesome folder to theme folder,
  • Open header.php file with editor,
  • Add this below code inside <head>  tag,

If you are using child theme use this code

<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri();?>/font-awesome-4.6.2/css/font-awesome.min.css">

If you are not using child theme, use this code

<link rel="stylesheet" href="<?php echo get_template_directory_uri();?>/font-awesome-4.6.2/css/font-awesome.min.css">
  • Save it and upload font awesome folder and header.php file to server.

Add Font Awesome Text Icon in WordPress – CDN

  • Open header.php file with editor,
  • Add this below code inside <head> tag,
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css">
  • Save it and upload header.php file to server.

How to use Font Awesome Text Icon?

To use font awesome text icon in web pages, simply use html <i> tags with classes (fa fa-facode).

  • Facebook Text Icon,
<i class="fa fa-facebook"></i>
  •  Google Plus text icon
<i class="fa fa-google-plus"></i>
  •  Twitter text icon
<i class="fa fa-twitter"></i>

Download Font Awesome Text Icon Cheat Sheet

[wpfilebase tag=file id=80 /]

Published by

Emdad Khan

I am Emdad Khan, A WordPress Theme Developer and Author of BN Web Design Website. A full time Freelancer on WordPress Theme Development & Optimization as well as blogger.

Leave a Reply