Font Awesome 5

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

Overview

MyTravel includes the world's most popular and easiest to use icon set - Font Awesome 5 - with over 1,340 free icons.

How to use

Place this code, which contains everything you need, within the <head> of each template or page that you want to use Font Awesome on.

                
                  <link rel="stylesheet" href="../../assets/vendor/font-awesome/css/fontawesome-all.min.css">

You need to know two bits of information to reference an icon:

  • Its name, prefixed with fa-
  • The style you want to use's corresponding prefix.
                
                  <span class="fas fa-stroopwafel"></span>
                  <!--
                    1) style prefix == fas
                    2) icon name == stroopwafel
                  -->
Style Availability Style Prefix Example Rendering
Solid Free fas <span class="fas fa-image"></span>
Regular Free far <span class="far fa-image"></span>
Light Pro Required fal <span class="fal fa-image"></span> N/A
Brands Free fab <span class="fab fa-font-awesome"></span>

Examples 

                      
                        <span class="fab fa-android text-primary"></span>
                        <span class="fas fa-car text-secondary"></span>
                        <span class="fas fa-chart-pie text-success"></span>
                        <span class="far fa-clock text-danger"></span>
                        <span class="fas fa-comment-alt text-info text-warning"></span>
                        <span class="fas fa-flag text-dark"></span>

Sizes

Need larger or smaller icons? Add .fa-xs, .fa-sm, .fa-lg, .fa-2x, .fa-3x, .fa-5x, .fa-7x or .fa-10x for additional sizes.

                      
                        <span class="fas fa-image fa-xs mr-2"></span>
                        <span class="fas fa-image fa-sm mr-2"></span>
                        <span class="fas fa-image mr-2"></span>
                        <span class="fas fa-image fa-lg mr-2"></span>
                        <span class="fas fa-image fa-2x mr-2"></span>
                        <span class="fas fa-image fa-3x mr-2"></span>
                        <span class="fas fa-image fa-5x mr-2"></span>
                        <span class="fas fa-image fa-7x mr-2"></span>
                        <span class="fas fa-image fa-10x mr-2"></span>
Contact Us