Font Awesome Changes

src/core/templates/body-footer.html

@@ -2,9 +2,11 @@
     <div class="row">
         <div class="col justify-content-center text-center">
             <nav>
-                <a href="#">Home</a>
+                <a href="mailto:"><i title="Send Us an Email" class="fas fa-envelope"></i></a>
-                <a href="#">About</a>
+                <a href="#"><i title="Find Us on Twitter" class="fab fa-twitter"></i></a>
-                <a href="#">Donate</a>
+                <a href="#"><i title="Find Us on LinkedIn" class="fab fa-linkedin"></i></a>
+                <br/>
+                <i class="fas fa-map-marker-alt">US, Earth</i>
             </nav>
         </div>
     </div>

src/core/templates/body-header.html

@@ -1,11 +1,74 @@
-<div class="container">
+<nav class="navbar navbar-expand-lg bg-dark navbar-dark sticky-top">
-    <div class="row">
+    <div class="col-sm">
-        <div class="col justify-content-center text-center">
+        <!-- Branding -->
-            <nav>
+        <div class="navbar-brand justify-content-center text-center">
-                <a href="#">Home</a>
+            <div class="site-branding">
-                <a href="#">About</a>
+                <h1 class="site-title">
-                <a href="#">Donate</a>
+                    <a href="#" title="TITLE" rel="home">
-            </nav>
+                        Hello World!
+                    </a>
+                </h1>
+                <h2 class="site-description">Your Slogan...</h2>
             </div>
         </div>
-</div>
+    </div>
+
+    <div class="col col-lg-auto">
+        <!-- Links -->
+        <ul class="navbar-nav">
+            <li class="nav-item">
+                <a class="nav-link" href="#">
+                    <i class="fab fa-youtube"></i>&nbsp;&nbsp;Home</a>
+            </li>
+
+            <!-- Dropdowns -->
+            <!-- Others Dropdown -->
+            <li class="nav-item dropdown">
+                <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
+                    Projects
+                </a>
+                <div class="dropdown-menu">
+                    <a class="dropdown-item" href="#">
+                        <i class="fas fa-code"></i>&nbsp;&nbsp;Code</a>
+                </div>
+            </li>
+
+            <!-- Socials Dropdown -->
+            <li class="nav-item dropdown">
+                <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
+                    Social
+                </a>
+                <div class="dropdown-menu">
+                    <a class="dropdown-item" href="mailto:">
+                        <i title="Send Us an Email" class="fas fa-envelope"></i>&nbsp;&nbsp;Email</a>
+                    <a class="dropdown-item" href="#">
+                        <i title="Find Us on Twitter" class="fab fa-twitter"></i>&nbsp;&nbsp;Twitter</a>
+                    <a class="dropdown-item" href="#">
+                        <i title="Find Us on LinkedIn" class="fab fa-linkedin"></i>&nbsp;&nbsp;LinkedIn</a>
+                </div>
+            </li>
+
+            <!-- Donation Dropdown -->
+            <li class="nav-item dropdown">
+                <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
+                    <i class="fa fa-coin"></i>
+                    Donate
+                </a>
+                <div class="dropdown-menu">
+                    <a class="dropdown-item" href="#">
+                        <i title="Find Us on LinkedIn" class="fab fa-patreon"></i> Patreon</a>
+                    <a class="dropdown-item" href="#">
+                        <i title="Find Us on LinkedIn" class="fab fa-paypal"></i> Paypal</a>
+                </div>
+            </li>
+
+            <!-- End Dropdowns -->
+
+            <li class="nav-item">
+                <a class="nav-link" href="#">
+                    <i class="far fa-address-card"></i> About</a>
+            </li>
+        </ul>
+    </div>
+
+</nav>

src/core/templates/index.html

@@ -8,9 +8,10 @@
     <div class="container">
         <div class="row">
             <div class="col justify-content-center text-center">
-                <h1>Hello World!</h1>
+                <p>Using dark themed Bootstrap 4 CSS files...</p>
-                <p>Using dark themed Bootstrap 4 css files...</p>
                 <p>Themes:&nbsp;<a href="https://bootswatch.com/" target="_blank">Bootswatch</a></p>
+                <p>Using Font Awesome CSS files...</p>
+                <p>Icons:&nbsp;<a href="https://fontawesome.com/icons/" target="_blank">Font Awesome</a></p>
             </div>
         </div>
     </div>

src/core/templates/layout.html

@@ -10,11 +10,21 @@
 
     {% block header_css %}
         <!-- Bootstrap CSS -->
-        <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
+        <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.png') }}">
         <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap/bootstrap.min.css')}}">
         <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap/bootstrap-datepicker.css')}}">
+
+        <!-- Font Awesome CSS Notes -->
+        <!-- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous"> -->
+        <!-- https://use.fontawesome.com/releases/v5.7.0/webfonts/fa-regular-400.woff2 -->
+        <!-- https://use.fontawesome.com/releases/v5.7.0/webfonts/ -->
+
+        <!-- Site Font Awesome CSS -->
+        <link rel="stylesheet" href="{{ url_for('static', filename='css/font-awesome/font-awesome-all-v5.7.css')}}">
+        <link rel="stylesheet" href="{{ url_for('static', filename='css/font-awesome/font-awesome-min-v4.7.0.css')}}">
+        <link rel="stylesheet" href="{{ url_for('static', filename='css/font-awesome/font-awesome-woff2.css')}}">
+
         <!-- Site CSS -->
-        <link rel="stylesheet" href="{{ url_for('static', filename='css/font-awesome-all-v5.7.css')}}">
         <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css')}}">
         {% block header_css_additional %}
         {% endblock header_css_additional %}