埋め込みHTMLでlink_toを使用する


100

私はTwitterのBootstrapのものを使用しており、次のHTMLを持っています。

<a class="btn" href="<%= user_path(@user) %>"><i class="icon-ok icon-white"></i> Do it@</a>

Railsでこれを行うための最良の方法は何ですか?使いたいのです<%= link_to 'Do it', user_path(@user) %>が、<i class="icon-ok icon-white"></i>使い物になりませんか?

回答:


260

二つの方法。どちらか:

<%= link_to user_path(@user) do %>
  <i class="icon-ok icon-white"></i> Do it@
<% end %>

または:

<%= link_to '<i class="icon-ok icon-white"></i> Do it@'.html_safe, user_path(@user) %>

1
多分それは<%= link_to ...ブロックの例にあるべきですか?
Voldy

それは間違いなくあるべきです。ありがとう!
Veraticus

3
2番目の例のアイコンの文字列の後に「.html_safe」が不足している可能性がありますか?
HO

あなたがブロックを渡すことができることを知りlink_toませんでした-私を教えてくれてありがとう!
yas4891

16

私は最近同じニーズがありました。これを試して:

<%= link_to '<i class="icon-ok icon-white"></i> Do it'.html_safe, user_path(@user) %>


11

以下のようなヘルパーメソッドを作成することもできます。

def link_fa_to(icon_name, text, link)
  link_to content_tag(:i, text, :class => "fa fa-#{icon_name}"), link
end

クラスを必要に応じて調整します。


8

Twitterブートストラップの同じアイコンクラスを使用するレールのリンクが必要な場合は、次のようにします。

<%= link_to "Do it@", user_path(@user), :class => "btn icon-ok icon-white" %>

2
@PeterNixeyいいえ、それはボタンのように見えません。btnクラスから退出した場合、表示されるのはアイコンだけです。ボタンの外観は、ボタンであることを意味しません。
Webdevotion 2012年


6

gem twitter-bootstrap-railで:ヘルパーグリフを作成します

  def glyph(*names)
    content_tag :i, nil, :class => names.map{|name| "icon-#{name.to_s.gsub('_','-')}" }
  end

だからあなたはそれを次のように使うことができます:glyph(:twitter) そしてあなたはヘルパーをリンクすることができます:link_to glyph(:twitter), user_path(@user)


aタグに複数のクラスを許可できます...すべてのケースで、どちらがユースケースになりますか?
eveevans 2013

1
これは、グリフ(Font Awesome)でリンクを作成するのに最適な方法です!さらにクラスを追加するには、などを使用します<%= link_to glyph(:comments), post_path(post), :class => "btn-small btn-warning" %>。これcommentsはFont Awesomeキャラクターの名前であり、リンクpost_path(post)先URLでありclass =>、グリフが使用するクラスを示します。
Weston

5

通常のHTMLでは、

<a href="register.html"><i class="fa fa-user-plus"></i> Register</a>

Ruby on Railsの場合:

<%= link_to routeName_path do %>
  <i class="fa fa-user-plus"></i> Link Name
<% end %>

<%= link_to register_path do %>
   <i class="fa fa-user-plus"></i> Register
<% end %>

これは私の出力です


3

あなたはまだ回答を受け入れていないので、これを試してみます。
他の回答はあなたが探していたものとは完全に一致していません。
これは、Railsの方法で行う方法です。

<%= link_to(user_path(@user), :class => 'btn') do %>
  <i class="icon-ok icon-white"> </i> Do it!
<% end %>

編集:将来の参照のために私の答えを残します
が、@ justin-herrickは
Twitter Bootstrapを操作するときに正しい答えを持っています。


2

アプリケーションで頻繁に使用する場合は、ヘルパーメソッドを使用して簡略化できると思います。

それをhelper / application_helper.rbに入れてください

def show_link(link_text, link_source)
  link_to("#{content_tag :i, nil, class: 'icon-ok icon-white'} #{link_text}".html_safe,
    link_source, class: "btn")
end

次に、link_toのようにビューファイルから呼び出します

<%= show_link "Do it", user_path(@user) %>

2

ブートストラップ3.2.0を使用している場合は、このヘルパーを app/helpers/application_helper.rb

module ApplicationHelper
  def glyph(*names)
    content_tag :i, nil, :class => names.map{|name| "glyphicon glyphicon-#{name.to_s.gsub('_','-')}" }
  end
end

そして、あなたの見解では:

link_to glyph(:pencil) + ' Edit', edit_post_path(@post), class: 'btn btn-warning'

1
def show_link (source, text)
  link_to source, {'data-original-title' => 'Show', 'data-toggle' => 'tooltip', :class => 'btn btn-xs btn-success'} do
    "#{text} #{content_tag :i, nil, class:' glyphicon glyphicon-eye-open' }".html_safe
    end
end

0

Titas Milanの提案に基づくヘルパーですが、ブロックを使用しています:

def show_link(link_text, link_source)
  link_to link_source, { class: 'btn' } do
    "#{content_tag :i, nil, class: 'icon-ok icon-white'} #{link_text}".html_safe
  end
end
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.