Categories
Web-Dev

Add email icon in font awesome and other icon libraries

Font awesome email icon can be used in both version 4 and 5 of font awesome using the code fa-envelope. Coding for email icon are different in each version

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 replies on “Add email icon in font awesome and other icon libraries”

Leave a Reply

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