BootstrapのモーダルリンクをボタンではなくFontawesomeのアイコンにしたい件

####やりたいこと
Bootstrap4で作ったモーダルリンクをボタンではなくFontawesomeのアイコンにしたい件

####現状
現在Bootstrap4を使ってRailsアプリのフロント部分を作っています。

モーダルを開くための切り替えボタンをFontawesomeのアイコンにしたいのですが、そのやり方がわからず困っています。

HTML
1<!-- 切り替えボタンの設定 -->
2<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
3  ココを押すと表示
4</button>
5
6<!-- モーダルの設定 -->
7<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
8  <div class="modal-dialog" role="document">
9    <div class="modal-content">
10      <div class="modal-header">
11        <h5 class="modal-title" id="exampleModalLabel">モーダルのタイトル</h5>
12        <button type="button" class="close" data-dismiss="modal" aria-label="閉じる">
13          <span aria-hidden="true">&times;</span>
14        </button>
15      </div>
16      <div class="modal-body">
17        <p>モーダルのコンテンツ文。</p>
18      </div>
19      <div class="modal-footer">
20        <button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
21        <button type="button" class="btn btn-primary">変更を保存</button>
22      </div><!-- /.modal-footer -->
23    </div><!-- /.modal-content -->
24  </div><!-- /.modal-dialog -->
25</div><!-- /.modal -->

####試したこと
link_toを使って書き換えようと思ったのですが、リンクするためのパスをどう書いたらいいのかわからず、詰まってしまいました。

リンクにFontawesomeを含めたいのではなく、モーダルを開くボタンをFontawesomeのアイコンそのものにしたいです。どうしたら良いでしょうか。よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

このあたりの書き方でいかがでしょうか? (アイコンはてきとうです)

案1

HTML
1<button type="button" class="btn btn-secondary" data-dismiss="modal">
2  <i class="fas fa-user-circle"></i>
3</button>

案2

HTML
1<button type="button" class="btn-original" data-dismiss="modal">
2  <i class="fas fa-user-circle"></i>
3</button>
4
5<style>
6/* 好きなように記述 */
7.btn-original {
8  padding: 0;
9  background: none;
10  border: none;
11}
12</style>