RailsにてFont Awesome 5のSVGアイコンが表示されない問題の修正
RailsにてFont Awesome 5を使おうと思ったのですが、なぜかアイコンが表示されません。調査の結果Turbolinksの機能が原因と判明しました。なんとか両ツールが共存できるよう対策を施したので情報をまとめます。
Turbolinksとは
Turbolinksとは、Webアプリケーションを高速化するツールです。
レンダリングしたページに繋がっているリンクを自動的に読み込み、ページを遷移した際に<body>タグの中身を入れ替え、<head>タグの情報をマージするという仕組みで、全ての情報を読み込むのにかかる負荷が軽減されます。
Railsでは標準でこの機能が有効になっています。
Font Awesome 5のアイコンが表示されない現象
上の画像のようにしたかったのですが、Turbolinksが有効になっていると独自のJavaScriptを使う時にイイ感じにならず、Font Awesome 5のアイコンが表示されませんでした。
Font Awesome 5をTurbolinksで使う方法
Font Awesomeのセットアップ
Font AwesomeのHow to useページから、SVG & JSのコードをコピーし、<head>タグ内に貼り付けます。
...
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
<script defer src="https://use.fontawesome.com/releases/v5.1.0/js/all.js" integrity="sha384-3LK/3kTpDE/Pkp8gTNp2gR/2gOiwQ6QaO7Td0zV76UFJVhqLl4Vl3KL1We6q6wR9" crossorigin="anonymous"></script>
...
スクリプトの初期化
最近公開されたFont Awesome 5でSVG画像のアイコンもサポートされるようになりましたが、それはJavaScriptが使われており、<i>タグをSVGアイコンに置き換える処理を行なっています。
そのFont AwesomeのAPIを呼び出すための小さなスクリプトを新たに作成し、ターボリンクのたびにアイコンを再レンダリングするようにします。
$(document).on('turbolinks:load', function() {
FontAwesome.dom.i2svg()
})
スクリプトはinit-fontawesomeなど適当な名前をつけてapp/assets/javascripts/ディレクトリ配下におきます。
もしapplication.jsに//= require_tree の記述がない場合、//= require init-fontawesomeという一行を追記する必要があります。
まとめ
Font Awesome5をRailsで使えるようにしました。やったね！