ヘッダーのメールアイコンの横に赤くメッセージ数を表示する方法の修正

メールアイコンの横に表示していた赤い未読メールのカウント数がずれていました。

ぱっとみいい感じですが、ドロップダウンにしてみると下記のとおり、ずれてしまします。

修正することができました。

下記のソースコードにあるように、ポイントは、ifからendまでのbadgeをfont-awesomeの前に記述することです。
これが後ろにあったばっかりに、赤いバッジがずれてしまっていました。

          <li>
            <%= link_to  conversations_path do %>
            <% if get_messagescount != 0 %>
                <span class="badge badge-red pull-right"><%= get_messagescount %></span>
            <% end %>
              <i class="fa fa-envelope visible-xs"> <%= t('Mailbox')%></i>
              <i class="fa fa-envelope hidden-xs" data-toggle="tooltip" data-placement="bottom" data-original-title=<%= t('Mailbox')%> aria-hidden="true"  data-container="body"> </i>
            <% end %>
          </li>

そう、このメールアイコンの横にある赤い丸に数字が入ったアイコンはBadgeと呼ばれています。検索の時に、この単語を知らないととても苦労します。今回参考にしたのはこちらのサイトです。こちらのmdoさんのコメントに解決方法が書いてありました。

github.com