はじめに
自分でアプリを開発している方は「fontawesomeで取り入れたこのアイコンにリンクをつけたいな」。はたまた、「この画像にリンクをつけたいな」と考えたことがあると思います。
そこで自分が色々調べてみた結果意外と簡単だったので紹介します。
※font-awesomeのインストールから表示まで。
Gemfile
gem 'font-awesome-rails'
ターミナル
bundle
app/assets/stylesheet/application.scss
*= require font-awesome
view
#今回はtwitterのiconで
<%= fa_icon 'twitter-square'%>
これでviewにはツイッターのiconが表示されているはずです。
ここからが本題。
icon（Font-awesome）の場合
iconを表示する方法は先ほどもやったようにこうですね。
view
#今回はtwitterのiconで
<%= fa_icon 'twitter-square'%>
そしてリンクをつける方法はこうですね。
link
<%= link_to '表示名', path, %>
この２つを合わせるとiconにリンクがつく訳です。
そこで少しlinkの形を変えてブロックで作成したいと思います。
ブロックとは簡単にdo~endで結ぶことです。
icon+link
<%= link_to("twitterのURL") do %>
<%= fa_icon 'twitter-square' %>
<% end %>
これだけでtwitterのiconを押すとtwitterのURLに飛ぶことができます。
画像の場合
画像にリンクをつける場合も基本的には上のやり方と同じです。
linkでブロックを作りその中にimage_tagを入れるだけ。
なのでいきなり結論へ。
link+image_tag
<%= link_to("URL") do %>
<%= image_tag @post.img.url if @post.img? %>
<% end %>
こんな感じです。