読者です 読者をやめる 読者になる 読者になる

ちーくんのブログ

プログラミング備忘録

Ruby on Railsで検索ボタンにアイコンを埋め込む

こんにちは。本日はRailsで検索部分のsubmitボタンのところにアイコン(虫眼鏡)を表示する方法です。

はじめに

今回はbootstrapを使用するので、導入していない人は過去記事からbootstrapを導入しておいてください。

blog.chi-kun.com


普通の検索フォーム

まずはよくある横並びの検索フォーム。

<% form ・・・, class: "form-inline" %>
<div class="form-group">
  <%= f.search_feild ・・・ %>
</div>
<%= f.submit "検索", class: "btn btn-primary" %>


親要素のform部分にform-inlineクラスをつけます。

すると横並びになります。


f:id:chi_kun:20170309234755p:plain


虫眼鏡アイコンを使う

虫眼鏡が検索フォームと一体型になった検索ボタンをつくりたいと思うことがありますよね?

<div class="input-group">
  <%= f.search_field ・・・ %>
  <span class="input-group-btn">
    <%= f.button fa_icon("search"), class: "btn btn-primary" %>
  </span>
</div>


form-groupではなく、input-groupで検索部分とsubmit部分を囲みます。

またinput-groupを使用している場合は、input-group-btnが使えます。

こうすることで、検索部分とsubmit部分が一体になったフォームができます。


f:id:chi_kun:20170309234647p:plain



本日は以上です。