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

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