How to display icon in rails? - ruby-on-rails

Hello I want to use the icon? or is it the alternative span tag? (No idea what its actually called) Anyways, I want to display a icon in my menu here is my current source code.
<li><i class="material-icons left">person</i><%= link_to signup_path %></li>
This is what I currently get
And here is the html I want it to generate:
<li><i class="material-icons">person/i></li>
Is there anyway to accomplish this in rails?

To create an ERB link in Rails that accomplishes the normal HTML code you provided, do this:
<%= link_to signup_path do %>
<i class="material-icons left">person</i>
<% end %>
This will generate:
<i class="material-icons left">person</i>

Only posting this answer because it is possible to do it this way.. definitely not preferred :)
<%= link_to '<i class="material-icons left">person</i>'.html_safe, signup_path %>

<%= link_to signup_path do %>
<i class="material-icons left"> person </i>
<% end %>

Related

add erb tag to link_to class in rails

I have a link class like
link_to( class: 'btn_download<%= index %>')
from a .each_with_index model call
Model.each_with_index do |m, index|
but it throws an error
and when i try with #{index} it just adds #{index} to the class name instead of dynamically adding 'index'
As I noticed there are some issues in your code. Please find below the code snippet example I wrote similar to your case which will help you to fix your issue
<% User.all.each_with_index do |m, index| %>
<%= link_to users_path, class: "btn_download#{index}" do %>
<span class="fa fa-sign-out"></span>
Download
<% end %>
<% end %>
So instead of using 'btn_download <%= index %>' try "btn_download#{index}".
Also, Use double quotes
class: "btn btn-primary btn-sm download_btn#{index}"
instead
class: 'btn btn-primary btn-sm download_btn#{index}'
Please let me know if you have any confusion in this.
If you want to wrap your link around an icon, use the following syntax:
<%= link_to ..._path(...) do %>
<i class="fa fa-spin fa spinner"></i>
<% end %>
You have to append a do onto the link to and then close the block with an end. And just put whatever inbetween (icon or image or div).

Ruby: Change button text to icon

My submit button for a comment displays a grey dull button that says "Create Comment". I want to instead display an icon.
I have tried...
<%= f.submit do %>
<i class="fa fa-paper-plane-o" aria-hidden="true"></i>
<% end %>
...with no luck
Do you have your font awesome gem in your gem file and bundled ?
You also need it to be called in your application.css file.
Try this:
<%= f.image_submit_tag(‘<i class="fa fa-paper-plane-o" aria-hidden="true"></i>’).html_safe %>
Reference: image_submit_tag
Try something like this
<%= button_tag(class: "btn btn-default") do %>
<i class="fa fa-paper-plane-o" aria-hidden="true"></i>
<% end %>
Hope this will help you.
I would try something like this:
<%= f.submit '<i class="fa fa-paper-plane-o" aria-hidden="true"></i>'.html_safe %>

Rails 4 - Font Awesome Icons in Links

Im trying to figure out how to make a link in my show page.
I want a link to
<%= #project.external_link %>.
I want to display it as:
<%= link_to '<i class="fa fa-link"></i>' %>
I've tried at least 20 variations on combining these two and I can't find a way that works.
Does anyone know how to display a font awesome icon, with a link to a dynamic field?
Try this:
<%= link_to #project.external_link do %>
<i class="fa fa-link"></i>
<% end %>
Try using :
<i class="fa fa-link"></i>

Linking Font Awesome icon to Rails attribute

I'm trying to have a Font Awesome icon be hyperlinked with the string of a Rails attribute.
I have tried this,
<%= link_to do %>
<i class="fa fa-link"><% school.website %></i>
<% end %>
this,
<i class="fa fa-link" href="<% school.website %>"></i>
and this:
<i class="fa fa-link" href="<%= school.website %>"></i>
among other variations, and can't seem to get the syntax right.
Would really appreciate some help with the syntax here, can't seem to find a specific answer to how linking with attributes works, only actual static text hrefs.
PS: I'm new to Rails / using Rails 4.2.
Try this:
<%= link_to ('<i class="fa fa-link"></i>').html_safe, desired_path %>
Considering school.website is a URL and you have included icons in CSS, the following will do:
<%= link_to(school.website) do %>
<i class="fa fa-link"></i>
<% end %>
Passing it as a block works too.
<%= link_to school.website do %>
<%= '<i class="fa fa-link"></i>'.html_safe %>
<% end %>
Assuming school.website is a URL that you would like to link to and display the link as well alongside the link icon from font awesome:
<%= link_to("<i class='fa fa-link'></i> #{school.website}".html_safe,school.website) %>
I am going to suggest something a little different.
I am personlly using glyphicons/fa a lot on my website, so I decided to create a little helper in application_helper.rb
application_helper.rb
def fa(glyph, text = nil)
html = "<i class=\"fa fa-#{glyph}\"></i>"
html << " #{text.to_s.html_safe}" if text
html.html_safe
end
And actually the correct syntax to use in views becomes either :
<%= link_to(school.website, class: "xxx") do %>
<%= fa('link') %>
<% end %>
OR (more compact)
<%= link_to(school.website, class: "xxx"){ fa('link') } %>
You can use a block as well if your link target is hard to fit into the name parameter. ERB example:
try this:
<%= link_to(school.website) do %>
<%= fa_icon "fas link" %>
<% end %>

How to write code for non-image Logo in Ruby on Rails

how do i write a Logo thats made out of pure css so its just like how i would write it in its html form, how does it look in Ruby/Ruby on Rails?
Right now i have this:
<div id="logo">
<h1><%= link_to 'Title <span>title</span>'.html_safe, root_path %></h1>
</div>
I am new to Ruby and Rails so i have no idea how to include the < span > and i don't think i should be playing with the .Html_safe either.
In cases like this, I prefer to have more control over the HTML, since including HTML as a string to a helper method is just nasty.
<div id="logo">
<h1>
<a href="<%= root_path %>">
Title <span>title</span>
</a>
</h1>
</div>
The helpers like link_to are helpful, but when they make you jump through hoops they aren't worth using.
<div id="logo">
<h1><%= link_to raw('Title <span>title</span>'), root_path %></h1>
</div>
You can use link_to with a block:
<%= link_to root_path do %>
Title <span>title</span>
<% end %>

Resources