Using link_to with embedded HTML
Ruby on-RailsTwitter BootstrapRuby on-Rails Problem Overview
I'm using Twitter's Bootstrap stuff and I have the following HTML:
<a class="btn" href="<%= user_path(@user) %>"><i class="icon-ok icon-white"></i> Do it@</a>
What's the best way to do this in Rails? I'd like to use <%= link_to 'Do it', user_path(@user) %>
but the <i class="icon-ok icon-white"></i>
is throwing me off?
Ruby on-Rails Solutions
Solution 1 - Ruby on-Rails
Two ways. Either:
<%= link_to user_path(@user) do %>
<i class="icon-ok icon-white"></i> Do it@
<% end %>
Or:
<%= link_to '<i class="icon-ok icon-white"></i> Do it@'.html_safe, user_path(@user) %>
Solution 2 - Ruby on-Rails
I had the same need recently. Try this:
<%= link_to '<i class="icon-ok icon-white"></i> Do it'.html_safe, user_path(@user) %>
Solution 3 - Ruby on-Rails
You have also the possibility to create an helper method like below:
def link_fa_to(icon_name, text, link)
link_to content_tag(:i, text, :class => "fa fa-#{icon_name}"), link
end
Adapt the classes to your needs.
Solution 4 - Ruby on-Rails
In normal HTML we do,
<a href="register.html"><i class="fa fa-user-plus"></i> Register</a>
In 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 %>
Solution 5 - Ruby on-Rails
If you want a link in rails that uses that same icon class from twitter bootstrap all you need to do is something like this.
<%= link_to "Do it@", user_path(@user), :class => "btn icon-ok icon-white" %>
Solution 6 - Ruby on-Rails
Using HAML:
= link_to model_path do
%img{src: '/assets/someimg.png'}
Solution 7 - Ruby on-Rails
In the gem twitter-bootstrap-rail : they create a helper glyph
def glyph(*names)
content_tag :i, nil, :class => names.map{|name| "icon-#{name.to_s.gsub('_','-')}" }
end
So you can use it like: glyph(:twitter)
and you link helper could look like: link_to glyph(:twitter), user_path(@user)
Solution 8 - Ruby on-Rails
I will give this a shot since you haven't accepted an answer yet
and the other answers are not 100% what you were looking for.
This is the way to do it the Rails way.
<%= link_to(user_path(@user), :class => 'btn') do %>
<i class="icon-ok icon-white"> </i> Do it!
<% end %>
Edit: leaving my answer for future reference,
but @justin-herrick has the correct answer when
working with Twitter Bootstrap.
Solution 9 - Ruby on-Rails
I think you can simplified it through a helper method if you use it frequently in your application.
put it in 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
Then call it from your view file just like link_to
<%= show_link "Do it", user_path(@user) %>
Solution 10 - Ruby on-Rails
If you are using the bootstrap 3.2.0, you can use this helper in your 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
and then, in your views:
link_to glyph(:pencil) + ' Edit', edit_post_path(@post), class: 'btn btn-warning'
Solution 11 - Ruby on-Rails
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
Solution 12 - Ruby on-Rails
Helper based on Titas Milan's suggestion, but using a block:
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