[Bootstrap][Font Awesome]文字＋アイコンをリンクにする

こんな感じのナビゲーションバーにリンクを埋め込みます。
お家、クリップ、人のアイコンはFontAwesomeで取り入れています。

まず、リンクなしの状態。

<ul class="navbar-nav ml-auto">
    
    <li class="nav-item mr-3"><i class="fas fa-home">About</i></li>
    <li class="nav-item mr-3"><i class="fas fa-paperclip">About</i></li>
    <li class="nav-item mr-3"><i class="fas fa-user-plus">sign up</i></li>
    <li class="nav-item"><i class="fas fa-sign-in-alt">login</i></li>
</ul>

リンクを埋め込む

<ul class="navbar-nav ml-auto">
    
    <li class="nav-item mr-3"><%= link_to "Home","/",class:"fas fa-home text-light" %></li>
    <li class="nav-item mr-3"><%= link_to "About","/home/about",class:"fas fa-paperclip text-light" %></li>
    <li class="nav-item mr-3"><%=link_to "sign up",new_user_registration_path,class:"fas fa-user-plus text-light" %></li>
    <li class="nav-item"><%=link_to"log in",new_user_session_path,class:"fas fa-sign-in-alt text-light" %></li>
</ul>

参考にさせていただいた記事