rails5.2 jqueryとfontawesomeの導入

updated on 2019-07-20

Railsにfontawesomeとjqueryを導入

fontawesome 4.4.0の導入

#application.html.erb
<head>
<title>my_project</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
...
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
...
<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
...

CDNを一行記述すればfontawesome導入終了！！

次にjquery導入!!

step1

#Gemfile
...
gem 'jquery-rails'

$ bundle install

step2

jqueryのjs読み込み

#assets/javascripts/application.js
...
//= require jquery
//= require jquery_ujs

なんと

これだけでjquery読み込み終了！！

ちなみに...

gemでfontawesomeを使う人は...

#Gemfile
gem 'font-awesome-rails'

$ bundle install

app/assets/stylesheet/application.scss

@import 'font-awesome';

これで終了!

<%= fa_icon 'star' %>

的な感じで使える