active_link_toを使用してアクティブなリンクに直接ボーダーを配置する方法はありますか？ Rails 4

Question

私は現在、nav_barリンクの状態の変化を追跡するためにactive_link_toを使用しています。スタイリングをアクティブな状態に追加すると、下図のようになります。私はアクティブな状態の境界線をリンクの一番上に押したいと思います。 Twitterのナビゲーションバーは、私が実装しようとしているスタイルの良い例です。最後に、1つのリンクがボーダーのアクティブ状態のみを表示する必要がある場合、すべての状態が現在ナビゲーションバーのためにアクティブであるように見えます。

Awesome Font Icon Nav-Item with top-border floating to the right

HTML

<nav class="navbar navbar-dark navbar-full navbar-fixed-top bg-inverse" style="font-size: 18px;"> 
    <a class="navbar-brand" href="#"><%= image_tag 'logo.png' %></a> 
    <ul class="nav navbar-nav navbar-properties"> 
    <% if user_signed_in? %> 
     <li class="nav-item"> 
      <%= active_link_to awesome_link 'fa fa-home fa-3x', home_path, :class => 'nav-item nav-link', title: 'Home', style: 'color: white' %> 
     </li> 
     <li class="nav-item"> 
      <%= active_link_to awesome_link 'fa fa-commenting-o fa-3x', news_user_path(current_user), :class => 'nav-item nav-link', title: 'News', style: 'color: white' %> 
     </li> 
     <li class="nav-item"> 
      <%= active_link_to awesome_link 'fa fa-globe fa-3x', discovery_index_path, :class => 'nav-item nav-link', title: 'Discovery', style: 'color: white' %> 
     </li> 
     <li class="nav-item"> 
      <%= active_link_to awesome_link 'fa fa-list-alt fa-3x', notifications_user_path(current_user), :class => 'nav-item nav-link', title: 'Notifications', style: 'color: white' %> 
     </li> 
     <li class="nav-item"> 
      <%= active_link_to awesome_link 'fa fa-envelope-o fa-3x', conversations_path, style: 'color: white;', title: 'Mailbox', :class => 'nav-item nav-link' %> 
     </li> 
     <li class="nav-item"> 
      <%= active_link_to awesome_link 'fa fa-newspaper-o fa-3x', assignments_path, style: 'color: white;', title: 'Assignments', :active => [['assignments'], []], :class => 'nav-item nav-link' %> 
     </li> 
     <li class="pull-right account-button-push"> 
      <div class="btn-group" role="group"> 
      <a type="button" class="btn btn-secondary-outline dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="margin-left: 12px;"><i class="fa fa-user fa-fw"></i> 
       Account</a> 

      <div class="dropdown-menu dropdown-menu-right"> 
       <a><%= link_to 'Edit Account', edit_user_registration_path(current_user), style: 'text-decoration: none; text-align: center;', class: 'dropdown-item' %></a> 
       <div class="dropdown-divider"> 
       </div> 
       <a><%= link_to 'Profile Settings', user_setting_path(current_user), :class => 'dropdown-item', style: 'text-align: center' %> </a> 
       <div class="dropdown-divider"></div> 
       <a><%= link_to 'Subscription', new_subscription_path(current_user), :class => 'dropdown-item', style: 'text-align: center' %></a> 
       <div class="dropdown-divider"></div> 
       <a><%= active_link_to 'Sign out', destroy_user_session_path, :method => :delete, :class => 'dropdown-item', strong: true, style: 'text-align: center' %></a> 
      </div> 
      </div> 
     </li> 
     <li class="pull-right"> 
      <%= active_link_to new_post_path, :class => 'btn btn-success', style: 'line-height: -4px;', remote: true, data: { :toggle => 'modal', :target => '#myModal'} do %> 
       <div style="margin-top:4px;"><i class="fa fa-crosshairs"></i> New Experience</div> 
      <% end %> 
     </li> 
     <li class="pull-right round-image-50-placement-fix"> 
      <%= link_to(image_tag(current_user.avatar_url(:thumb), class: 'round-image-50'), current_user) %> 
     </li> 
    <% else %> 
     <li class="nav-item"> 
      <%= active_link_to awesome_link 'fa fa-home fa-2x', home_path, :class => 'nav-item nav-link', title: 'Home', style: 'color: white' %> 
     </li> 
     <li class="nav-item"> 
      <%= active_link_to awesome_link 'fa fa-sign-in fa-2x', login_path, :class => 'nav-item nav-link', title: 'Sign in' %> 
     </li> 
     <li class="nav-item"> 
      <%= active_link_to awesome_link 'fa fa-user-plus fa-2x', new_user_registration_path, :class => 'nav-item nav-link', title: 'Register' %> 
     </li> 
     <li class="nav-item"> 
      <%= active_link_to awesome_link 'fa fa-info fa-2x', about_path, :class => 'nav-item nav-link', title: 'About' %> 
     </li> 
    <% end %> 
    </ul> 
</nav> 

Awesome_linkは、両方のACTIを使用できるかどうか、私は疑問に思う

<a href="/"><i class="fa fa-arrow-circle-o-up"></i></a> 

CSS

nav a.active { 
     border-style: solid; 
     border-top: thick solid #27CCC0; 
    } 

Answer 1

下記のリンクタグを生成し、同じリンクのve_link_toとawesome_linkは両方ともa要素を生成します。

<li class="nav-item"> 
      <%= active_link_to awesome_link 'fa fa-home fa-3x', home_path, :class => 'nav-item nav-link', title: 'Home', style: 'color: white' %> 
     </li> 

このアプローチは動作しません

<li class="nav-item"> 
      <%= active_link_to '<i class="ffa fa-home fa-3x" style="color:white"></i>', home_path, :class_active => 'nav-link active', :class_inactive => 'nav-link' %> 
    </li>