Using link_to with embedded HTML

Question

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?

Veraticus · Answer 1 · 2012-11-08T23:49:37.323

274

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) %>

edited Nov 08 '12 at 23:49

answered Feb 22 '12 at 19:56

Veraticus

15,944
3
41
45

1

Maybe it should be `<%= link_to ...` in the example with block? – Voldy Feb 22 '12 at 19:59
It definitely should be. Thanks! – Veraticus Feb 22 '12 at 20:03
3

Maybe missing '.html_safe' after the string for the icon in the second example? – Harry Aug 19 '12 at 21:43
I did not know that you can pass a block to `link_to` - thanks for teaching me! – yas4891 Nov 29 '12 at 05:24

score 16 · Answer 2 · answered May 24 '12 at 00:50

16

I had the same need recently. Try this:

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

answered May 24 '12 at 00:50

Eric Farkas

531
5
9

score 11 · Answer 3 · answered Aug 26 '14 at 08:29

11

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.

answered Aug 26 '14 at 08:29

Renshuki

191
2
7

score 9 · Answer 4 · edited Apr 01 '18 at 08:41

9

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 %>

edited Apr 01 '18 at 08:41

Mark Rotteveel

100,966
191
140
197

answered Apr 01 '18 at 05:47

Ovi

179
1
4

score 8 · Answer 5 · answered Feb 22 '12 at 20:32

8

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" %>

answered Feb 22 '12 at 20:32

Justin Herrick

2,981
17
18

2

@PeterNixey no it does not, it makes it look like a button. If you leave of the `btn` class, all you see is the icon. The button look doesn't mean it's a button. – Webdevotion Oct 09 '12 at 17:46

score 7 · Answer 6 · answered Mar 03 '14 at 14:00

7

Using HAML:

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

answered Mar 03 '14 at 14:00

ddavison

28,221
15
85
110

score 6 · Answer 7 · answered Dec 19 '12 at 22:05

6

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)

answered Dec 19 '12 at 22:05

eveevans

4,392
2
31
38

you could allow multiple clases for the a tag... In all cases, wich will be the use cases? – eveevans Feb 11 '13 at 20:30
1

This is a great way to create a link with a glyph (Font Awesome)! To add more classes use something like `<%= link_to glyph(:comments), post_path(post), :class => "btn-small btn-warning" %>`. Here `comments` is the name of the Font Awesome character, `post_path(post)` is the destination url and `class =>` shows which classes the glyph will use. – Weston Oct 14 '13 at 00:33

Webdevotion · Answer 8 · 2012-10-09T17:45:34.127

3

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.

edited Oct 09 '12 at 17:45

answered Oct 09 '12 at 17:40

Webdevotion

1,223
13
24

Titas Milan · Answer 9 · 2012-12-25T10:45:14.190

2

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) %>

edited Dec 25 '12 at 10:45

answered Dec 25 '12 at 09:47

Titas Milan

21
3

score 2 · Answer 10 · answered Jul 14 '14 at 22:27

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'

score 1 · Answer 11 · answered Jun 29 '16 at 22:39

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

answered Jun 29 '16 at 22:39

mr i.o

952
2
10
20

score 0 · Answer 12 · answered Jan 09 '13 at 16:57

0

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

answered Jan 09 '13 at 16:57

meleyal

32,252
24
73
79

Using link_to with embedded HTML

12 Answers12

Linked