I have a navbar in a rails app using glyphicons. I can't seem to set the spacing between the glyph and the link label unless I put a " " in front of the label.
Can anyone suggest a better solution. Thanks!
<li>
<%= link_to "Maintenance", dashboards_path, :class=> "glyphicon glyphicon-wrench" %>
</li>
If you have tag and content in a single line it produces no padding.
Make sure you anchor looks something like:
<li>
<a href="#" class="glyphicon glyphicon-wrench">
Maintenance
</a>
</li>
Or using link_to
<li>
<%= link_to dashboards_path, class: 'glyphicon glyphicon-wrench' do %>
<span>Maintenance</span>
<% end %>
</li>
Though it seems strange but
Maintenance
produces no spaces between icon and text
bootply
Related
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>
I'm using a series of link_to blocks to create buttons in my application. However I'm finding that these links don't end up working. As I mouse-over the button, it recognizes the link, the correct url displays in the lower left-hand corner in firefox, but when I click, nothing happens. Nothing comes up in my terminal or development log either.
My code is as follows:
<%= link_to new_folder_path do%>
<div class="btn btn-default add-button add_fields"><span class="glyphicon glyphicon-plus"></span>Add Folder</div>
<% end %>
This renders the following html:
<li>
<a href="/folders/new">
<div class="btn btn-default add-button add_fields"><span class="glyphicon glyphicon-plus"></span>Add Folder</div>
</a>
</li>
I should also note that if I just type the standard link in without the do block, it runs just fine:
<li><%= link_to "test", new_folder_path %></li>
Any thoughts on this would be much appreciated!
Try this.
= link_to "<span class='glyphicon glyphicon-plus'></span>Add Folder".html_safe, new_folder_path, class: 'btn btn-default add-button add_fields'
You're probably better using button_to for the buttons -
Generates a form containing a single button that submits to the URL created by the set of options.
So instead of your link_to, you'd be able to use:
<%= button_to "Add Folder", new_folder_path, class: "btn btn-default add-button add_fields glyphicon glyphicon-plus" %>
As a sidenote, if you're trying to style elements inside an <a> tag, you're going to have problems. You'll be much better styling the <a> tag itself, or not at all.
As such, the issue you're getting could probably be resolved using the following:
<%= link_to "Add Folder", new_folder_path, class: "btn btn-default add-button add_fields glyphicon glyphicon-plus" %>
--
Icons
I know Bootstrap includes Glyphicons. If they're anything like ionIcons, they'll work by prepending the glyph with a :before pseudo class.
If this is the case, you don't need a separate <span> element to encapsulate them; just add the class to your link/button and the :before should be prepended.
Of course, if you want to style the span inside the link, you'll have to use the link_to block; however you need ensure you encase your text in the span instead of having it with no content.
Turned out I had dropped a class into my div that prevented the link from rendering (add_fields was the class). Profoundly unsatisfying answer it is what it is. Thanks to anyone who took the time to give me a hint.
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 %>
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 %>
I ran into a weird bug with my ruby on rails app where I want to display the search field and button in the navbar but the view looks like this image
The problem is that it has black in the background for just the search box and button.
The following code is below:
<section class="top-bar-section">
<ul class="left">
<%= form_tag('/search') do %>
<li>
<%= text_field_tag :query, nil ,:placeholder => "Search for designs", :id=>"nav_search_box" %>
</li>
<li>
<%= submit_tag 'Search', :class=>"round button", :id=>"nav_search_btn" %>
</li>
<% end %>
</ul>
</section>
Any insight on fixing this bug would be much appreciated!
This is explained in the official docs, under other elements.
http://foundation.zurb.com/docs/components/top-bar.html
"can use a small Foundation button in the nav, just include has-form as a class for its parent li."