Configure Font-Awesome

Gemfile

@@ -55,6 +55,9 @@ gem 'jquery-rails', '~> 4.3'
 # responsive, mobile first projects on the web.
 gem 'bootstrap', '~> 4.1.3'
 
+# Font-Awesome SASS gem for use in Ruby projects.
+gem 'font-awesome-sass', '~> 5.5.0'
+
 group :development, :test do
   # factory_bot provides a framework and DSL for defining and using factories.
   gem 'factory_bot_rails', '~> 4.10'

Gemfile.lock

@@ -71,6 +71,8 @@ GEM
     faker (1.9.1)
       i18n (>= 0.7)
     ffi (1.9.25)
+    font-awesome-sass (5.5.0.1)
+      sassc (>= 1.11)
     globalid (0.4.1)
       activesupport (>= 4.2.0)
     i18n (1.1.1)
@@ -183,6 +185,9 @@ GEM
       sprockets (>= 2.8, < 4.0)
       sprockets-rails (>= 2.0, < 4.0)
       tilt (>= 1.1, < 3)
+    sassc (2.0.0)
+      ffi (~> 1.9.6)
+      rake
     simplecov (0.16.1)
       docile (~> 1.1)
       json (>= 1.8, < 3)
@@ -230,6 +235,7 @@ DEPENDENCIES
   database_cleaner (~> 1.7)
   factory_bot_rails (~> 4.10)
   faker (~> 1.8)
+  font-awesome-sass (~> 5.5.0)
   jquery-rails (~> 4.3)
   listen (>= 3.0.5, < 3.2)
   pg (>= 0.18, < 2.0)

app/assets/stylesheets/application.scss

@@ -1 +1,3 @@
 @import 'bootstrap';
+@import 'font-awesome-sprockets';
+@import 'font-awesome';

app/views/layouts/application.html.erb

@@ -28,46 +28,46 @@
         <ul class="navbar-nav mr-auto">
           <li class="nav-item">
             <a class="nav-link" target="_blank" href="https://t.me/lpr_perm">
-              <i class="fab fa-telegram"></i>
+              <%= icon 'fab', 'telegram' %>
               Канал
             </a>
           </li>
 
           <li class="nav-item">
             <a class="nav-link" target="_blank" href="https://t.me/lpr_perm_chat">
-              <i class="fab fa-telegram"></i>
+              <%= icon 'fab', 'telegram' %>
               Чат
             </a>
           </li>
 
           <li class="nav-item">
             <a class="nav-link" target="_blank" href="https://vk.com/lpr_perm">
-              <i class="fab fa-vk"></i>
+              <%= icon 'fab', 'vk' %>
               Паблик
             </a>
           </li>
 
           <li class="nav-item dropdown">
             <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-              <i class="fas fa-link"></i>
+              <%= icon 'fas', 'link' %>
               Другие ссылки
             </a>
             <div class="dropdown-menu" aria-labelledby="navbarDropdown">
               <a class="dropdown-item" target="_blank" href="https://libertarian-party.ru">
-                <i class="fas fa-home"></i>
+                <%= icon 'fas', 'home' %>
                 Основной сайт партии
               </a>
               <a class="dropdown-item" target="_blank" href="https://libertarian-party.ru/regionalnye-otdeleniya/permskiy-kray">
-                <i class="fas fa-home"></i>
+                <%= icon 'fas', 'home' %>
                 Страница отделения на сайте партии
               </a>
               <a class="dropdown-item" target="_blank" href="https://libertarian-party.ru/regionalnye-otdeleniya">
-                <i class="fas fa-home"></i>
+                <%= icon 'fas', 'home' %>
                 Отделения в других регионах
               </a>
               <div class="dropdown-divider"></div>
               <a class="dropdown-item" target="_blank" href="https://github.com/lpr-perm">
-                <i class="fab fa-github"></i>
+                <%= icon 'fab', 'github' %>
                 GitHub
               </a>
             </div>