diff --git a/src/main/webapp/assets/content/static/footer.html b/src/main/webapp/assets/content/static/footer.html
index 427f3330..8bf36c44 100644
--- a/src/main/webapp/assets/content/static/footer.html
+++ b/src/main/webapp/assets/content/static/footer.html
@@ -10,27 +10,27 @@ <h4 class="mb-0 font-weight-light">Get in touch with using any of these platform
                     <a target="_blank" href="https://twitter.com/goasksef"
                         class="btn btn-neutral btn-icon-only btn-twitter btn-round btn-lg" data-toggle="tooltip"
                         data-original-title="Follow us">
-                        <i class="fa fa-twitter"></i>
+                        <i class="fab fa-twitter"></i>
                     </a>
                     <a target="_blank" href="https://www.facebook.com/sustainableeducationfoundation/"
                         class="btn btn-neutral btn-icon-only btn-facebook btn-round btn-lg" data-toggle="tooltip"
                         data-original-title="Like us">
-                        <i class="fa fa-facebook-square"></i>
+                        <i class="fab fa-facebook-square"></i>
                     </a>
                     <a target="_blank" href="https://www.linkedin.com/company/sefglobal/"
                         class="btn btn-neutral btn-icon-only btn-linkedin btn-lg btn-round" data-toggle="tooltip"
                         data-original-title="Follow us">
-                        <i class="fa fa-linkedin-square"></i>
+                        <i class="fab fa-linkedin"></i>
                     </a>
                     <a target="_blank" href="https://www.instagram.com/sefglobal/"
                         class="btn btn-neutral btn-icon-only btn-instagram btn-round btn-lg" data-toggle="tooltip"
                         data-original-title="Follow us">
-                        <i class="fa fa-instagram"></i>
+                        <i class="fab fa-instagram"></i>
                     </a>
                     <a target="_blank" href="https://github.com/sef-global/"
                         class="btn btn-neutral btn-icon-only btn-github btn-round btn-lg" data-toggle="tooltip"
                         data-original-title="Contribute us">
-                        <i class="fa fa-github"></i>
+                        <i class="fab fa-github"></i>
                     </a>
                 </div>
             </div>
diff --git a/src/main/webapp/assets/content/static/navbar.html b/src/main/webapp/assets/content/static/navbar.html
index 9fd4658d..8a6ac65a 100644
--- a/src/main/webapp/assets/content/static/navbar.html
+++ b/src/main/webapp/assets/content/static/navbar.html
@@ -92,7 +92,7 @@ <h6 class="text-primary mb-md-1">Student Ambassador</h6>
                 <li class="nav-item">
                     <a class="nav-link nav-link-icon" href="https://www.facebook.com/sustainableeducationfoundation/"
                        target="_blank" data-toggle="tooltip" title="" data-original-title="Like us on Facebook">
-                        <i class="fa fa-facebook-square"></i>
+                        <i class="fab fa-facebook-square"></i>
                         <span class="nav-link-inner--text d-lg-none">Facebook</span>
                     </a>
                 </li>
@@ -100,7 +100,7 @@ <h6 class="text-primary mb-md-1">Student Ambassador</h6>
                 <li class="nav-item">
                     <a class="nav-link nav-link-icon" href="https://twitter.com/goasksef" target="_blank"
                        data-toggle="tooltip" title="" data-original-title="Follow us on Twitter">
-                        <i class="fa fa-twitter-square"></i>
+                        <i class="fab fa-twitter-square"></i>
                         <span class="nav-link-inner--text d-lg-none">Twitter</span>
                     </a>
                 </li>
@@ -108,7 +108,7 @@ <h6 class="text-primary mb-md-1">Student Ambassador</h6>
                 <li class="nav-item">
                     <a class="nav-link nav-link-icon" href="https://www.linkedin.com/company/sefglobal/" target="_blank"
                        data-toggle="tooltip" title="" data-original-title="Follow us on LinkedIn">
-                        <i class="fa fa-linkedin-square"></i>
+                        <i class="fab fa-linkedin"></i>
                         <span class="nav-link-inner--text d-lg-none">LinkedIn</span>
                     </a>
                 </li>
@@ -116,7 +116,7 @@ <h6 class="text-primary mb-md-1">Student Ambassador</h6>
                 <li class="nav-item">
                     <a class="nav-link nav-link-icon" href="https://www.instagram.com/sefglobal/" target="_blank"
                        data-toggle="tooltip" title="" data-original-title="Follow us on Instagram">
-                        <i class="fa fa-instagram"></i>
+                        <i class="fab fa-instagram"></i>
                         <span class="nav-link-inner--text d-lg-none">Instagram</span>
                     </a>
                 </li>
diff --git a/src/main/webapp/examples/components.html b/src/main/webapp/examples/components.html
index 15d67802..303ee45c 100755
--- a/src/main/webapp/examples/components.html
+++ b/src/main/webapp/examples/components.html
@@ -111,21 +111,21 @@ <h5 class="heading text-warning mb-md-1">Components</h5>
                     <li class="nav-item">
                         <a class="nav-link nav-link-icon" href="https://www.facebook.com/creativetim" target="_blank"
                            data-toggle="tooltip" title="Like us on Facebook">
-                            <i class="fa fa-facebook-square"></i>
+                            <i class="fab fa-facebook-square"></i>
                             <span class="nav-link-inner--text d-lg-none">Facebook</span>
                         </a>
                     </li>
                     <li class="nav-item">
                         <a class="nav-link nav-link-icon" href="https://www.instagram.com/creativetimofficial"
                            target="_blank" data-toggle="tooltip" title="Follow us on Instagram">
-                            <i class="fa fa-instagram"></i>
+                            <i class="fab fa-instagram"></i>
                             <span class="nav-link-inner--text d-lg-none">Instagram</span>
                         </a>
                     </li>
                     <li class="nav-item">
                         <a class="nav-link nav-link-icon" href="https://twitter.com/creativetim" target="_blank"
                            data-toggle="tooltip" title="Follow us on Twitter">
-                            <i class="fa fa-twitter-square"></i>
+                            <i class="fab fa-twitter-square"></i>
                             <span class="nav-link-inner--text d-lg-none">Twitter</span>
                         </a>
                     </li>
@@ -133,7 +133,7 @@ <h5 class="heading text-warning mb-md-1">Components</h5>
                         <a class="nav-link nav-link-icon"
                            href="https://github.com/creativetimofficial/argon-design-system" target="_blank"
                            data-toggle="tooltip" title="Star us on Github">
-                            <i class="fa fa-github"></i>
+                            <i class="fab fa-github"></i>
                             <span class="nav-link-inner--text d-lg-none">Github</span>
                         </a>
                     </li>
@@ -185,7 +185,7 @@ <h5 class="heading text-warning mb-md-1">Components</h5>
                                 </a>
                                 <a href="https://github.com/creativetimofficial/argon-design-system"
                                    class="btn btn-lg btn-github btn-icon mb-3 mb-sm-0" target="_blank">
-                                    <span class="btn-inner--icon"><i class="fa fa-github"></i></span>
+                                    <span class="btn-inner--icon"><i class="fab fa-github"></i></span>
                                     <span class="btn-inner--text">
                       <span class="text-warning">Star us</span> on Github</span>
                                 </a>
@@ -805,13 +805,13 @@ <h2 class="mb-5">
                     <ul class="navbar-nav ml-auto">
                         <li class="nav-item">
                             <a class="nav-link nav-link-icon" href="#">
-                                <i class="fa fa-facebook-square"></i>
+                                <i class="fab fa-facebook-square"></i>
                                 <span class="nav-link-inner--text d-lg-none">Facebook</span>
                             </a>
                         </li>
                         <li class="nav-item">
                             <a class="nav-link nav-link-icon" href="#">
-                                <i class="fa fa-twitter"></i>
+                                <i class="fab fa-twitter"></i>
                                 <span class="nav-link-inner--text d-lg-none">Twitter</span>
                             </a>
                         </li>
@@ -823,7 +823,7 @@ <h2 class="mb-5">
                         </li>
                         <li class="nav-item">
                             <a class="nav-link nav-link-icon" href="#">
-                                <i class="fa fa-instagram"></i>
+                                <i class="fab fa-instagram"></i>
                                 <span class="nav-link-inner--text d-lg-none">Instagram</span>
                             </a>
                         </li>
@@ -860,13 +860,13 @@ <h2 class="mb-5">
                     <ul class="navbar-nav align-items-lg-center ml-lg-auto">
                         <li class="nav-item">
                             <a class="nav-link nav-link-icon" href="#">
-                                <i class="fa fa-facebook-square"></i>
+                                <i class="fab fa-facebook-square"></i>
                                 <span class="nav-link-inner--text d-lg-none">Share</span>
                             </a>
                         </li>
                         <li class="nav-item">
                             <a class="nav-link nav-link-icon" href="#">
-                                <i class="fa fa-twitter"></i>
+                                <i class="fab fa-twitter"></i>
                                 <span class="nav-link-inner--text d-lg-none">Tweet</span>
                             </a>
                         </li>
@@ -909,19 +909,19 @@ <h2 class="mb-5">
                     <ul class="navbar-nav ml-auto">
                         <li class="nav-item">
                             <a class="nav-link nav-link-icon" href="#">
-                                <i class="fa fa-facebook-square"></i>
+                                <i class="fab fa-facebook-square"></i>
                                 <span class="nav-link-inner--text">Facebook</span>
                             </a>
                         </li>
                         <li class="nav-item">
                             <a class="nav-link nav-link-icon" href="#">
-                                <i class="fa fa-twitter"></i>
+                                <i class="fab fa-twitter"></i>
                                 <span class="nav-link-inner--text">Twitter</span>
                             </a>
                         </li>
                         <li class="nav-item">
                             <a class="nav-link nav-link-icon" href="#">
-                                <i class="fa fa-instagram"></i>
+                                <i class="fab fa-instagram"></i>
                                 <span class="nav-link-inner--text">Instagram</span>
                             </a>
                         </li>
@@ -1924,7 +1924,7 @@ <h5 class="title">
                                     <i class="fa fa-google-plus"></i>
                                 </a>
                                 <a href="#" class="btn btn-twitter btn-icon-only rounded-circle btn-icon-rounded">
-                                    <i class="fa fa-twitter"></i>
+                                    <i class="fab fa-twitter"></i>
                                 </a>
                                 <a href="#" class="btn btn-facebook btn-icon-only rounded-circle btn-icon-rounded">
                                     <i class="fa fa-facebook"></i>
@@ -1947,7 +1947,7 @@ <h5 class="title">
                                     <i class="fa fa-google-plus"></i>
                                 </a>
                                 <a href="#" class="btn btn-twitter btn-icon-only rounded-circle btn-icon-rounded">
-                                    <i class="fa fa-twitter"></i>
+                                    <i class="fab fa-twitter"></i>
                                 </a>
                                 <a href="#" class="btn btn-facebook btn-icon-only rounded-circle btn-icon-rounded">
                                     <i class="fa fa-facebook"></i>
@@ -1967,7 +1967,7 @@ <h5 class="title">
                             </h5>
                             <div class="mt-3">
                                 <a href="#" class="btn btn-github btn-icon-only rounded-circle btn-icon-rounded">
-                                    <i class="fa fa-github"></i>
+                                    <i class="fab fa-github"></i>
                                 </a>
                                 <a href="#" class="btn btn-facebook btn-icon-only rounded-circle btn-icon-rounded">
                                     <i class="fa fa-facebook"></i>
@@ -1994,7 +1994,7 @@ <h5 class="title">
                                     <i class="fa fa-linkedin"></i>
                                 </a>
                                 <a href="#" class="btn btn-twitter btn-icon-only rounded-circle btn-icon-rounded">
-                                    <i class="fa fa-twitter"></i>
+                                    <i class="fab fa-twitter"></i>
                                 </a>
                                 <a href="#" class="btn btn-facebook btn-icon-only rounded-circle btn-icon-rounded">
                                     <i class="fa fa-facebook"></i>
@@ -2395,7 +2395,7 @@ <h5>Plain card</h5>
                     </div>
                     <div class="card shadow bg-gradient-dark-cyan mb-4">
                         <div class="card-body text-white">
-                            <h6 class="text-white"><i class="fa fa-twitter"></i> Twitter</h6>
+                            <h6 class="text-white"><i class="fab fa-twitter"></i> Twitter</h6>
                             <h5 class="text-white">Sed ut perspiciatis unde omnis iste natus</h5>
                         </div>
                         <div class="card-footer">
@@ -2771,12 +2771,12 @@ <h4 class="mb-0 font-weight-light">Let's get in touch on any of these platforms.
                 <a target="_blank" href="https://twitter.com/creativetim"
                    class="btn btn-neutral btn-icon-only btn-twitter btn-round btn-lg" data-toggle="tooltip"
                    data-original-title="Follow us">
-                    <i class="fa fa-twitter"></i>
+                    <i class="fab fa-twitter"></i>
                 </a>
                 <a target="_blank" href="https://www.facebook.com/creativetim"
                    class="btn btn-neutral btn-icon-only btn-facebook btn-round btn-lg" data-toggle="tooltip"
                    data-original-title="Like us">
-                    <i class="fa fa-facebook-square"></i>
+                    <i class="fab fa-facebook-square"></i>
                 </a>
                 <a target="_blank" href="https://dribbble.com/creativetim"
                    class="btn btn-neutral btn-icon-only btn-dribbble btn-lg btn-round" data-toggle="tooltip"
@@ -2786,7 +2786,7 @@ <h4 class="mb-0 font-weight-light">Let's get in touch on any of these platforms.
                 <a target="_blank" href="https://github.com/creativetimofficial"
                    class="btn btn-neutral btn-icon-only btn-github btn-round btn-lg" data-toggle="tooltip"
                    data-original-title="Star on Github">
-                    <i class="fa fa-github"></i>
+                    <i class="fab fa-github"></i>
                 </a>
             </div>
         </div>
diff --git a/src/main/webapp/examples/landing.html b/src/main/webapp/examples/landing.html
index 723950a0..a8eb369b 100755
--- a/src/main/webapp/examples/landing.html
+++ b/src/main/webapp/examples/landing.html
@@ -100,25 +100,25 @@ <h5 class="heading text-warning mb-md-1">Components</h5>
           <ul class="navbar-nav align-items-lg-center ml-lg-auto">
             <li class="nav-item">
               <a class="nav-link nav-link-icon" href="https://www.facebook.com/creativetim" target="_blank" data-toggle="tooltip" title="Like us on Facebook">
-                <i class="fa fa-facebook-square"></i>
+                <i class="fab fa-facebook-square"></i>
                 <span class="nav-link-inner--text d-lg-none">Facebook</span>
               </a>
             </li>
             <li class="nav-item">
               <a class="nav-link nav-link-icon" href="https://www.instagram.com/creativetimofficial" target="_blank" data-toggle="tooltip" title="Follow us on Instagram">
-                <i class="fa fa-instagram"></i>
+                <i class="fab fa-instagram"></i>
                 <span class="nav-link-inner--text d-lg-none">Instagram</span>
               </a>
             </li>
             <li class="nav-item">
               <a class="nav-link nav-link-icon" href="https://twitter.com/creativetim" target="_blank" data-toggle="tooltip" title="Follow us on Twitter">
-                <i class="fa fa-twitter-square"></i>
+                <i class="fab fa-twitter-square"></i>
                 <span class="nav-link-inner--text d-lg-none">Twitter</span>
               </a>
             </li>
             <li class="nav-item">
               <a class="nav-link nav-link-icon" href="https://github.com/creativetimofficial/argon-design-system" target="_blank" data-toggle="tooltip" title="Star us on Github">
-                <i class="fa fa-github"></i>
+                <i class="fab fa-github"></i>
                 <span class="nav-link-inner--text d-lg-none">Github</span>
               </a>
             </li>
@@ -410,7 +410,7 @@ <h5 class="title">
                 </h5>
                 <div class="mt-3">
                   <a href="#" class="btn btn-warning btn-icon-only rounded-circle">
-                    <i class="fa fa-twitter"></i>
+                    <i class="fab fa-twitter"></i>
                   </a>
                   <a href="#" class="btn btn-warning btn-icon-only rounded-circle">
                     <i class="fa fa-facebook"></i>
@@ -432,7 +432,7 @@ <h5 class="title">
                 </h5>
                 <div class="mt-3">
                   <a href="#" class="btn btn-primary btn-icon-only rounded-circle">
-                    <i class="fa fa-twitter"></i>
+                    <i class="fab fa-twitter"></i>
                   </a>
                   <a href="#" class="btn btn-primary btn-icon-only rounded-circle">
                     <i class="fa fa-facebook"></i>
@@ -454,7 +454,7 @@ <h5 class="title">
                 </h5>
                 <div class="mt-3">
                   <a href="#" class="btn btn-info btn-icon-only rounded-circle">
-                    <i class="fa fa-twitter"></i>
+                    <i class="fab fa-twitter"></i>
                   </a>
                   <a href="#" class="btn btn-info btn-icon-only rounded-circle">
                     <i class="fa fa-facebook"></i>
@@ -476,7 +476,7 @@ <h5 class="title">
                 </h5>
                 <div class="mt-3">
                   <a href="#" class="btn btn-success btn-icon-only rounded-circle">
-                    <i class="fa fa-twitter"></i>
+                    <i class="fab fa-twitter"></i>
                   </a>
                   <a href="#" class="btn btn-success btn-icon-only rounded-circle">
                     <i class="fa fa-facebook"></i>
@@ -661,16 +661,16 @@ <h4 class="mb-0 font-weight-light">Let's get in touch on any of these platforms.
         </div>
         <div class="col-lg-6 text-lg-center btn-wrapper">
           <a target="_blank" href="https://twitter.com/creativetim" class="btn btn-neutral btn-icon-only btn-twitter btn-round btn-lg" data-toggle="tooltip" data-original-title="Follow us">
-            <i class="fa fa-twitter"></i>
+            <i class="fab fa-twitter"></i>
           </a>
           <a target="_blank" href="https://www.facebook.com/creativetim" class="btn btn-neutral btn-icon-only btn-facebook btn-round btn-lg" data-toggle="tooltip" data-original-title="Like us">
-            <i class="fa fa-facebook-square"></i>
+            <i class="fab fa-facebook-square"></i>
           </a>
           <a target="_blank" href="https://dribbble.com/creativetim" class="btn btn-neutral btn-icon-only btn-dribbble btn-lg btn-round" data-toggle="tooltip" data-original-title="Follow us">
             <i class="fa fa-dribbble"></i>
           </a>
           <a target="_blank" href="https://github.com/creativetimofficial" class="btn btn-neutral btn-icon-only btn-github btn-round btn-lg" data-toggle="tooltip" data-original-title="Star on Github">
-            <i class="fa fa-github"></i>
+            <i class="fab fa-github"></i>
           </a>
         </div>
       </div>
diff --git a/src/main/webapp/examples/login.html b/src/main/webapp/examples/login.html
index b4ace848..d3b7e0d9 100755
--- a/src/main/webapp/examples/login.html
+++ b/src/main/webapp/examples/login.html
@@ -100,25 +100,25 @@ <h5 class="heading text-warning mb-md-1">Components</h5>
           <ul class="navbar-nav align-items-lg-center ml-lg-auto">
             <li class="nav-item">
               <a class="nav-link nav-link-icon" href="https://www.facebook.com/creativetim" target="_blank" data-toggle="tooltip" title="Like us on Facebook">
-                <i class="fa fa-facebook-square"></i>
+                <i class="fab fa-facebook-square"></i>
                 <span class="nav-link-inner--text d-lg-none">Facebook</span>
               </a>
             </li>
             <li class="nav-item">
               <a class="nav-link nav-link-icon" href="https://www.instagram.com/creativetimofficial" target="_blank" data-toggle="tooltip" title="Follow us on Instagram">
-                <i class="fa fa-instagram"></i>
+                <i class="fab fa-instagram"></i>
                 <span class="nav-link-inner--text d-lg-none">Instagram</span>
               </a>
             </li>
             <li class="nav-item">
               <a class="nav-link nav-link-icon" href="https://twitter.com/creativetim" target="_blank" data-toggle="tooltip" title="Follow us on Twitter">
-                <i class="fa fa-twitter-square"></i>
+                <i class="fab fa-twitter-square"></i>
                 <span class="nav-link-inner--text d-lg-none">Twitter</span>
               </a>
             </li>
             <li class="nav-item">
               <a class="nav-link nav-link-icon" href="https://github.com/creativetimofficial/argon-design-system" target="_blank" data-toggle="tooltip" title="Star us on Github">
-                <i class="fa fa-github"></i>
+                <i class="fab fa-github"></i>
                 <span class="nav-link-inner--text d-lg-none">Github</span>
               </a>
             </li>
@@ -229,16 +229,16 @@ <h4 class="mb-0 font-weight-light">Let's get in touch on any of these platforms.
         </div>
         <div class="col-lg-6 text-lg-center btn-wrapper">
           <a target="_blank" href="https://twitter.com/creativetim" class="btn btn-neutral btn-icon-only btn-twitter btn-round btn-lg" data-toggle="tooltip" data-original-title="Follow us">
-            <i class="fa fa-twitter"></i>
+            <i class="fab fa-twitter"></i>
           </a>
           <a target="_blank" href="https://www.facebook.com/creativetim" class="btn btn-neutral btn-icon-only btn-facebook btn-round btn-lg" data-toggle="tooltip" data-original-title="Like us">
-            <i class="fa fa-facebook-square"></i>
+            <i class="fab fa-facebook-square"></i>
           </a>
           <a target="_blank" href="https://dribbble.com/creativetim" class="btn btn-neutral btn-icon-only btn-dribbble btn-lg btn-round" data-toggle="tooltip" data-original-title="Follow us">
             <i class="fa fa-dribbble"></i>
           </a>
           <a target="_blank" href="https://github.com/creativetimofficial" class="btn btn-neutral btn-icon-only btn-github btn-round btn-lg" data-toggle="tooltip" data-original-title="Star on Github">
-            <i class="fa fa-github"></i>
+            <i class="fab fa-github"></i>
           </a>
         </div>
       </div>
diff --git a/src/main/webapp/examples/profile.html b/src/main/webapp/examples/profile.html
index f594224f..d8d2e81a 100755
--- a/src/main/webapp/examples/profile.html
+++ b/src/main/webapp/examples/profile.html
@@ -100,25 +100,25 @@ <h5 class="heading text-warning mb-md-1">Components</h5>
           <ul class="navbar-nav align-items-lg-center ml-lg-auto">
             <li class="nav-item">
               <a class="nav-link nav-link-icon" href="https://www.facebook.com/creativetim" target="_blank" data-toggle="tooltip" title="Like us on Facebook">
-                <i class="fa fa-facebook-square"></i>
+                <i class="fab fa-facebook-square"></i>
                 <span class="nav-link-inner--text d-lg-none">Facebook</span>
               </a>
             </li>
             <li class="nav-item">
               <a class="nav-link nav-link-icon" href="https://www.instagram.com/creativetimofficial" target="_blank" data-toggle="tooltip" title="Follow us on Instagram">
-                <i class="fa fa-instagram"></i>
+                <i class="fab fa-instagram"></i>
                 <span class="nav-link-inner--text d-lg-none">Instagram</span>
               </a>
             </li>
             <li class="nav-item">
               <a class="nav-link nav-link-icon" href="https://twitter.com/creativetim" target="_blank" data-toggle="tooltip" title="Follow us on Twitter">
-                <i class="fa fa-twitter-square"></i>
+                <i class="fab fa-twitter-square"></i>
                 <span class="nav-link-inner--text d-lg-none">Twitter</span>
               </a>
             </li>
             <li class="nav-item">
               <a class="nav-link nav-link-icon" href="https://github.com/creativetimofficial/argon-design-system" target="_blank" data-toggle="tooltip" title="Star us on Github">
-                <i class="fa fa-github"></i>
+                <i class="fab fa-github"></i>
                 <span class="nav-link-inner--text d-lg-none">Github</span>
               </a>
             </li>
@@ -219,16 +219,16 @@ <h4 class="mb-0 font-weight-light">Let's get in touch on any of these platforms.
         </div>
         <div class="col-lg-6 text-lg-center btn-wrapper">
           <a target="_blank" href="https://twitter.com/creativetim" class="btn btn-neutral btn-icon-only btn-twitter btn-round btn-lg" data-toggle="tooltip" data-original-title="Follow us">
-            <i class="fa fa-twitter"></i>
+            <i class="fab fa-twitter"></i>
           </a>
           <a target="_blank" href="https://www.facebook.com/creativetim" class="btn btn-neutral btn-icon-only btn-facebook btn-round btn-lg" data-toggle="tooltip" data-original-title="Like us">
-            <i class="fa fa-facebook-square"></i>
+            <i class="fab fa-facebook-square"></i>
           </a>
           <a target="_blank" href="https://dribbble.com/creativetim" class="btn btn-neutral btn-icon-only btn-dribbble btn-lg btn-round" data-toggle="tooltip" data-original-title="Follow us">
             <i class="fa fa-dribbble"></i>
           </a>
           <a target="_blank" href="https://github.com/creativetimofficial" class="btn btn-neutral btn-icon-only btn-github btn-round btn-lg" data-toggle="tooltip" data-original-title="Star on Github">
-            <i class="fa fa-github"></i>
+            <i class="fab fa-github"></i>
           </a>
         </div>
       </div>
diff --git a/src/main/webapp/examples/register.html b/src/main/webapp/examples/register.html
index 728ce3af..79bd5fc0 100755
--- a/src/main/webapp/examples/register.html
+++ b/src/main/webapp/examples/register.html
@@ -100,25 +100,25 @@ <h5 class="heading text-warning mb-md-1">Components</h5>
           <ul class="navbar-nav align-items-lg-center ml-lg-auto">
             <li class="nav-item">
               <a class="nav-link nav-link-icon" href="https://www.facebook.com/creativetim" target="_blank" data-toggle="tooltip" title="Like us on Facebook">
-                <i class="fa fa-facebook-square"></i>
+                <i class="fab fa-facebook-square"></i>
                 <span class="nav-link-inner--text d-lg-none">Facebook</span>
               </a>
             </li>
             <li class="nav-item">
               <a class="nav-link nav-link-icon" href="https://www.instagram.com/creativetimofficial" target="_blank" data-toggle="tooltip" title="Follow us on Instagram">
-                <i class="fa fa-instagram"></i>
+                <i class="fab fa-instagram"></i>
                 <span class="nav-link-inner--text d-lg-none">Instagram</span>
               </a>
             </li>
             <li class="nav-item">
               <a class="nav-link nav-link-icon" href="https://twitter.com/creativetim" target="_blank" data-toggle="tooltip" title="Follow us on Twitter">
-                <i class="fa fa-twitter-square"></i>
+                <i class="fab fa-twitter-square"></i>
                 <span class="nav-link-inner--text d-lg-none">Twitter</span>
               </a>
             </li>
             <li class="nav-item">
               <a class="nav-link nav-link-icon" href="https://github.com/creativetimofficial/argon-design-system" target="_blank" data-toggle="tooltip" title="Star us on Github">
-                <i class="fa fa-github"></i>
+                <i class="fab fa-github"></i>
                 <span class="nav-link-inner--text d-lg-none">Github</span>
               </a>
             </li>
@@ -236,16 +236,16 @@ <h4 class="mb-0 font-weight-light">Let's get in touch on any of these platforms.
         </div>
         <div class="col-lg-6 text-lg-center btn-wrapper">
           <a target="_blank" href="https://twitter.com/creativetim" class="btn btn-neutral btn-icon-only btn-twitter btn-round btn-lg" data-toggle="tooltip" data-original-title="Follow us">
-            <i class="fa fa-twitter"></i>
+            <i class="fab fa-twitter"></i>
           </a>
           <a target="_blank" href="https://www.facebook.com/creativetim" class="btn btn-neutral btn-icon-only btn-facebook btn-round btn-lg" data-toggle="tooltip" data-original-title="Like us">
-            <i class="fa fa-facebook-square"></i>
+            <i class="fab fa-facebook-square"></i>
           </a>
           <a target="_blank" href="https://dribbble.com/creativetim" class="btn btn-neutral btn-icon-only btn-dribbble btn-lg btn-round" data-toggle="tooltip" data-original-title="Follow us">
             <i class="fa fa-dribbble"></i>
           </a>
           <a target="_blank" href="https://github.com/creativetimofficial" class="btn btn-neutral btn-icon-only btn-github btn-round btn-lg" data-toggle="tooltip" data-original-title="Star on Github">
-            <i class="fa fa-github"></i>
+            <i class="fab fa-github"></i>
           </a>
         </div>
       </div>
diff --git a/src/main/webapp/index.html b/src/main/webapp/index.html
index feb4b993..aee7bc2b 100755
--- a/src/main/webapp/index.html
+++ b/src/main/webapp/index.html
@@ -14,7 +14,7 @@
     <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
     <!-- Icons -->
     <link href="assets/vendor/nucleo/css/nucleo.css" rel="stylesheet">
-    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" rel="stylesheet">
     <!-- Argon CSS -->
     <link type="text/css" href="assets/css/argon.css?v=1.0.1" rel="stylesheet">
     <!-- global CSS -->
diff --git a/src/main/webapp/irc.html b/src/main/webapp/irc.html
index 68afbb92..898c8b70 100644
--- a/src/main/webapp/irc.html
+++ b/src/main/webapp/irc.html
@@ -13,7 +13,7 @@
     <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
     <!-- Icons -->
     <link href="assets/vendor/nucleo/css/nucleo.css" rel="stylesheet">
-    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" rel="stylesheet">
     <!-- Argon CSS -->
     <link type="text/css" href="assets/css/argon.css?v=1.0.1" rel="stylesheet">
     <!-- global CSS -->
diff --git a/src/main/webapp/join-us.html b/src/main/webapp/join-us.html
index d85aa459..dc72adec 100644
--- a/src/main/webapp/join-us.html
+++ b/src/main/webapp/join-us.html
@@ -13,7 +13,7 @@
     <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
     <!-- Icons -->
     <link href="assets/vendor/nucleo/css/nucleo.css" rel="stylesheet">
-    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" rel="stylesheet">
     <!-- Argon CSS -->
     <link type="text/css" href="assets/css/argon.css?v=1.0.1" rel="stylesheet">
     <!-- global CSS -->
diff --git a/src/main/webapp/onelive.html b/src/main/webapp/onelive.html
index 7f943711..bc7df8dc 100644
--- a/src/main/webapp/onelive.html
+++ b/src/main/webapp/onelive.html
@@ -11,7 +11,7 @@
     <link href="assets/img/brand/favicon.png" rel="icon" type="image/png">
     <!-- Icons -->
     <link href="assets/vendor/nucleo/css/nucleo.css" rel="stylesheet">
-    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" rel="stylesheet">
     <!-- Argon CSS -->
     <link type="text/css" href="assets/css/argon.css?v=1.0.1" rel="stylesheet">
     <!-- global CSS -->
diff --git a/src/main/webapp/scholarx.html b/src/main/webapp/scholarx.html
index cd10a09f..a256637b 100644
--- a/src/main/webapp/scholarx.html
+++ b/src/main/webapp/scholarx.html
@@ -13,7 +13,7 @@
     <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
     <!-- Icons -->
     <link href="assets/vendor/nucleo/css/nucleo.css" rel="stylesheet">
-    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" rel="stylesheet">
     <!-- Argon CSS -->
     <link type="text/css" href="assets/css/argon.css?v=1.0.1" rel="stylesheet">
     <!-- global CSS -->
diff --git a/src/main/webapp/student-ambassador.html b/src/main/webapp/student-ambassador.html
index 28a5702a..a5de9af4 100644
--- a/src/main/webapp/student-ambassador.html
+++ b/src/main/webapp/student-ambassador.html
@@ -11,7 +11,7 @@
     <link href="assets/img/brand/favicon.png" rel="icon" type="image/png">
     <!-- Icons -->
     <link href="assets/vendor/nucleo/css/nucleo.css" rel="stylesheet">
-    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" rel="stylesheet">
     <!-- Argon CSS -->
     <link type="text/css" href="assets/css/argon.css?v=1.0.1" rel="stylesheet">
     <!-- global CSS -->
diff --git a/src/main/webapp/team.html b/src/main/webapp/team.html
index 638f0aa4..49b9569a 100644
--- a/src/main/webapp/team.html
+++ b/src/main/webapp/team.html
@@ -13,7 +13,7 @@
     <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
     <!-- Icons -->
     <link href="assets/vendor/nucleo/css/nucleo.css" rel="stylesheet">
-    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" rel="stylesheet">
     <!-- Argon CSS -->
     <link type="text/css" href="assets/css/argon.css?v=1.0.1" rel="stylesheet">
     <!-- global CSS -->
diff --git a/src/main/webapp/template.html b/src/main/webapp/template.html
index 32de008a..e7083ac0 100644
--- a/src/main/webapp/template.html
+++ b/src/main/webapp/template.html
@@ -13,7 +13,7 @@
     <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
     <!-- Icons -->
     <link href="assets/vendor/nucleo/css/nucleo.css" rel="stylesheet">
-    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" rel="stylesheet">
     <!-- Argon CSS -->
     <link type="text/css" href="assets/css/argon.css?v=1.0.1" rel="stylesheet">
     <!-- global CSS -->