【Rails】Bootstrapを活用し、アイコンを押すと指定のリンクに飛ばす方法

はじめに

今回はBootstrapで使用できるアイコンを押すと、
指定のパス先へ飛ぶ方法について書かせていただきます。

BootstrapのアイコンURL：https://icons.getbootstrap.jp/

下記イメージです！
このようなヘッダーの人型のアイコンを押すと、ユーザー詳細ページに飛ぶような場合

※今回はBootstrapの基本的な使い方等は割愛させていただきます。

開発環境

Bootstamp バージョン５
Ruby on Rails バージョン2.6.5

記述方法

通常Railsでパスを指定する際には下記のlink_toメソッドを使用します。

link_toメソッド

  <%= link_to '表示させる文字列', （指定のパス）_path, method: :メソッド, class: "" %>

最初、自分は”表示させる文字列”の部分にアイコンのHTMLを差し込めば表示させれるかなと思い、記述してみましたがうまくいきませんでした。
（式展開でHTMLを記述しましたが、コードがそのまま表示されてしまいました💦）

解決策としてlink_toメソッドの記述の仕方を下記に変更することで問題が解決しました！

link_toメソッド

 <%= link_to( 指定のぱす _path)  do %>
    表示させる文字
 <% end %>

完成形

完成形

<%= link_to(user_path)  do %>

# アイコンの記述
  <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30"fill="currentColor" class="bi bi-person-circle mx-3 text-dark" viewBox="0 0 16 16">
    <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
    <path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/>
  </svg>

<% end %>

この書き方で先程のフッダー画像の人型のアイコンを押すとユーザー詳細ページへ飛ぶように設定できました！
CSSでテキストのデコレーションを消さないと、アイコンが青色のリンク色になってしまうので気をつけてください！