RailsにてFont Awesome 5のSVGアイコンが表示されない問題の修正

RailsにてFont Awesome 5を使おうと思ったのですが、なぜかアイコンが表示されません。調査の結果Turbolinksの機能が原因と判明しました。なんとか両ツールが共存できるよう対策を施したので情報をまとめます。

Turbolinksとは

Turbolinksとは、Webアプリケーションを高速化するツールです。

レンダリングしたページに繋がっているリンクを自動的に読み込み、ページを遷移した際に<body>タグの中身を入れ替え、<head>タグの情報をマージするという仕組みで、全ての情報を読み込むのにかかる負荷が軽減されます。

Railsでは標準でこの機能が有効になっています。

Font Awesome 5のアイコンが表示されない現象

Font Awesomeのアイコンをinputタグに表示させている様子

上の画像のようにしたかったのですが、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で使えるようにしました。やったね!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください