fontawesome importmap

app/javascript/application.js

@@ -8,3 +8,11 @@ window.Toastify=Toastify
 
 // Js Controllers
 import "controllers"
+
+// Font Awesome
+import { far } from "@fortawesome/free-regular-svg-icons"
+import { fas } from "@fortawesome/free-solid-svg-icons"
+import { fab } from "@fortawesome/free-brands-svg-icons"
+import { library } from "@fortawesome/fontawesome-svg-core"
+import "@fortawesome/fontawesome-free"
+library.add(far, fas, fab)

app/views/layouts/_navbar.html.erb

@@ -1,5 +1,12 @@
 <nav>
-  Navigation2
-  <p>paragraph</p>
-  <i>italic</i>
+  <ul>
+    <li>
+      A<i class="fa-solid fa-house"></i>
+    </li>
+    <li>
+      B<i class="fa-solid fa-magnifying-glass"></i>
+    </li>
+    <li>C<i class="fa-regular fa-user"></i></li>
+    <li>D<i class="fa-solid fa-user"></i></li>
+  </ul>
 </nav>

app/views/scores/_form.html.erb

@@ -1,23 +1,34 @@
 <%= form_with(model: score, class: "contents") do |form| %>
   <% if score.errors.any? %>
-    <div id="error_explanation" class="bg-red-50 text-red-500 px-3 py-2 font-medium rounded-lg mt-3">
-      <h2><%= pluralize(score.errors.count, "error") %> prohibited this score from being saved:</h2>
+    <div
+      id="error_explanation"
+      class="bg-red-50 text-red-500 px-3 py-2 font-medium rounded-lg mt-3"
+    >
+      <h2><%= pluralize(score.errors.count, "error") %>
+        prohibited this score from being saved:</h2>
       <ul>
         <% score.errors.each do |error| %>
           <li><%= error.full_message %></li>
         <% end %>
+
       </ul>
     </div>
+
   <% end %>
   <div class="my-5">
     <%= form.label :name %>
-    <%= form.text_field :name, class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full" %>
+    <%= form.text_field :name,
+                    class:
+                      "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full" %>
   </div>
   <div class="my-5">
     <%= form.label :grade %>
-    <%= form.number_field :grade, class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full" %>
+    <%= form.number_field :grade,
+                      class:
+                        "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full" %>
   </div>
   <div class="inline">
-    <%= form.submit class: "rounded-lg py-3 px-5 bg-blue-600 text-white inline-block font-medium cursor-pointer" %>
+    <%= form.submit class:
+                  "rounded-lg py-3 px-5 bg-blue-600 text-white inline-block font-medium cursor-pointer" %>
   </div>
 <% end %>

config/importmap.rb

@@ -7,3 +7,8 @@ pin '@hotwired/turbo-rails', to: 'turbo.min.js', preload: true
 pin '@hotwired/stimulus', to: 'stimulus.min.js'
 pin '@hotwired/stimulus-loading', to: 'stimulus-loading.js'
 pin 'toastify-js' # @1.12.0
+pin '@fortawesome/fontawesome-svg-core', to: '@fortawesome--fontawesome-svg-core.js' # @6.5.2
+pin '@fortawesome/free-brands-svg-icons', to: '@fortawesome--free-brands-svg-icons.js' # @6.5.2
+pin '@fortawesome/free-regular-svg-icons', to: '@fortawesome--free-regular-svg-icons.js' # @6.5.2
+pin '@fortawesome/free-solid-svg-icons', to: '@fortawesome--free-solid-svg-icons.js' # @6.5.2
+pin "@fortawesome/fontawesome-free", to: "@fortawesome--fontawesome-free.js" # @6.5.2