rails 独学して軽くにちゃんまとめつくる

bootstrap ヘッダーで詰まったとこ

・メニューが横並びにならない
・font awesome のアイコンと文字がずれる

 

メニューが横並びにならない。

        <ul class="nav nav-pills pull-right">
              <li>
                <%= link_to  root_path, class: "nav-pills" do %>
                <i class="fa fa-home" aria-hidden="true"></i> ホーム
              </li>
              <li>
                <%= link_to new_event_info_path, class: "nav-pills" do %>
                  <i class="fa fa-plus" aria-hidden="true"></i> イベント追加

              </li>

 

こんな感じで元締めの ul のクラスに nav-pills pull-right をいれてやる。すると、右端によせられ、横並びになる。

 

 

 

文字とアイコンがずれてしまう

f:id:mooooooooooriiiiii:20170131234036p:plain

 

こんな感じで「ホーム」という文字の横に「+」を置きたいんだが、ずれてしまう。この時のコードはこれ

<li>
 <%= link_to "ホーム", root_path, class: "nav-pills" %>

 <i class="fa fa-plus" aria-hidden="true"></i>

</li>

 

あ、この <i></i> はFont Awesome というのを使ってます。無料でアイコンが使えるサービスなのでぜひ使ってみてください。

まあいいや。次に <li> の中に<a> を放りこんだらこうなってしまった。

 

f:id:mooooooooooriiiiii:20170131234918p:plain

 

Rails4でlink_toの中にFont Awesomeのアイコンを埋め込む方法 - Qiita

 

 

           

<li>             

  <a>                

     <i class="fa fa-plus" aria-hidden="true"></i>

    <%= link_to "ホーム", root_path, class: "nav-pills" %>              

   </a>            
</li>

 

こんなのないだろと思い検索をかけてみるとあった。どうやら link ~ do をすればいいらしい。パーフェクトRuby on Rails でもたしかにこの構文はでてきたが、こんな使い方をするとは驚いた。

 

 

            

<li>               
 <%= link_to  root_path, class: "nav-pills" do %>
  <i class="fa fa-home" aria-hidden="true"></i>ホーム              
  <% end %>             
</li>

 

f:id:mooooooooooriiiiii:20170201000315p:plain

 ちょっと+が近いな。</i>と「ホーム」の間にスペースを入れよう。

半角でスペースを入れたが、二個以上は認識されなかった。こういうときは全角のスペースをいれたら直る。その結果がこれ。

 

f:id:mooooooooooriiiiii:20170201000413p:plain

ホームに+はおかしいので家のマークに変えた。