在嵌入式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>把我扔掉了?

Answers:


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 ...在带有block的示例中?
Voldy 2012年

绝对应该。谢谢!
Veraticus'2

3
在第二个示例中,图标字符串之后可能缺少'.html_safe'吗?
HO

我不知道您可以通过link_to-感谢您教我!
yas4891 2012年


11

您还可以创建如下的帮助方法:

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

使课程适应您的需求。


8

如果您想在Rails中使用从Twitter Bootstrap中使用相同图标类的链接,您需要做的就是这样。

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

2
@PeterNixey不,不是,它看起来像一个按钮。如果您离开btn课程,则只看到图标。按钮外观并不意味着它是一个按钮。
Webdevotion

7

使用HAML:

= link_to model_path do
  %img{src: '/assets/someimg.png'}

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)


您可以为一个标签允许多个分类...在所有情况下,用例都可以吗?
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 =>显示该字形将使用的类。
2013年

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

因为您还没有接受答案
,而其他答案不是您所要查找的内容的100%,所以我会做个尝试。
这是使用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

如果您使用的是Bootstrap 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
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.