Dragon Arrow written by Tatsuya Nakaji, all rights reserved animated-dragon-image-0164

rails5.2 jqueryとfontawesomeの導入

イメージ
Dec 08, 2018

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' %>

的な感じで使える