Add email icon in font awesome and other icon libraries

Font Awesome is the best way to add email icon on your website. In this post we describe how to add the email icon using font awesome

Add email icon in font awesome
Picture courtesy of font awesome icons

By default the “fa-email” html code is not available for including email icon on your site. You must use the fa-envelope code. Both font awesome version 4 and 5 support its usage.  

How to add font awesome in your website to add email icon later 

Step 1: First of all download font-awesome package on your desktop. Download Link for v 5.3.1  . The download link for earlier version (font awesome version 3 and 4 ) can be found here

Step 2: After downloading the required files transfer the package into your website directory.

Step3a : Call your font awesome css through your website’s header something like this

<link rel='stylesheet' id='font-awesome-css'  href='https://nepdoc.com/...../fonts/font-awesome.min.css' type='text/css' media='all' />

Step 3b: If you want to use font awesome icons in wordpress you can enqueue the styles with simple addition to you functions.php file, something like this 

function nepdoc_styles() {
global $wp_styles;
 wp_enqueue_style( 'font-awesome', get_template_directory_uri() . '/fonts/font-awesome.min.css', false ,'0.1', 'all' );
}
add_action( 'wp_enqueue_scripts', 'nepdoc_styles' ); // This is important

Step 4: Call for this icon in your desired place 
For font awesome 4 and below use the following code 

<i class="fa fa-envelope"></i>

For font awesome 5 and above use. Link for more details 

<i class="fas fa-envelope"></i> //solid icon
<i class="far fa-envelope"></i> // regular icon
<i class="fal fa-envelope"></i> //pro only 
<i class="fas fa-envelope-square"></i>
<i class="far fa-envelope-square"></i> //pro
<i class="fal fa-envelope-square"></i> // pro 
<i class="fas fa-envelope-open-text"></i>
<i class="fas fa-envelope-open"></i>

How to add email icon in other css icon libraries 

  1. Ion icons : <ion-icon name=”mail”></ion-icon>
  2. Symbolset : More details here 
  3. The Design Office : go here 
  4. Typicons : <i class=”typcn-mail”></i>
  5. Foundation icon Pack : <i classs=”fi-[mail]”></i>
  6. Pictonic : premium 
  7. Pictos : premium 

3 Responses

  1. CBD Guy says:

    Hello everybody ! can anyone suggest where I can buy CBD Gummy Slices Pm 25mg 50mg By Proleve?

  2. I have to to learn more of this from you! And I am going to link back to this |blog immediately. Awesome!

Leave a Reply

Your email address will not be published. Required fields are marked *