Rails アイコンの表示右に揃える

Question

ボールドテキスト参考サイトのカテゴリのようにアロー（矢印）アイコンを右に揃えて表示したいです。
text-rightでは何も変化はありませんでした。

私の開発環境はFlat uiというデザインフレームワークを使っているので
参考サイトのように画像を用意できません
実現したいのはカテゴリのlist-group内にアイコンを右揃えに表示したいです。

eachを使わずに一つ一つリンクを作る方法であればできるのですが
少ないコードで書きたいのでどうぞよろしく願いいたします。

  <!-- カテゴリsideバー -->
          <div class="prettyprint">
            <p><small>
              <a class="list-group-item btn-warning active "><span class="fui-list-numbered"></span> カテゴリ</a>
              <% Category.where(parent_id: 1).sort{|a, b| a.code <=> b.code}.each do |cat| %>
                  <%= link_to category_index_path(cat.id), { class: 'list-group-item' } do%>
                       <%=  cat.name %>
                      <span class="fui-arrow-right text-right"></span>
                  <% end %>
              <% end %>
            </small></p>
          </div>

Answer 1

Flat UIってのがあるんですね。知らなかった。

以下、参考サイトのカテゴリというのの抜粋。

<dl class="sideNaviOne">
  <dt class="sideNaviTitle sideIconSupt">
    プロジェクトを探す
  </dt>
  <dd>
    <a href="/discover/index/1/all/open/">
      募集中のプロジェクト
    </a>
  </dd>
</dl>

#sideNavi{float: left;width: 300px;}
 : <省略>
 :
.sideNaviOne a{display: block;background: url("../img/icon_arrow_24_02.gif?ver=20150210112720") no-repeat 225px 8px;border-radius: 2px;

ナビゲーションの幅が 300 で矢印の位置は225px から。
固定位置でgif画像。。。

質問のソースコードや特に"text-right"を追記することで、どのようなhtmlが生成されるのかわからないですが、参考サイトのようにhtmlやcssで対応するのもありかと思います。。。

Comments

[smith]

画像ファイルないんです。text-rightは通常textとかを右にしてくれます。

[Cf_cwd]

画像ファイルがないとは？参考サイトでは画像background-imageとして使用していますが……。作成予定の物に画像を使用しないということでしょうか？

入れ子でspan要素を作っておいて文字をそこに入れておく。styleでposition: absolute;を設定して表示したい場所に配置(rightとtopなどを使用)。スマートかは別としてこの方法でも容易に実現可能かと。別の方の回答でコメントするのが少しあれですが……