Menu
I am trying to use glyph icons that I have styled in my rails app.
I want to make the icon a link to another page, but can't use the standard bootstrap styling because I have customised the links for my page's style.
I keep getting a keyword class error - does anyone know why?
Thank you.
I have the following link in my view:
<li><%= link_to <span class="glyphicon glyphicon-comment"></span>, page_path('messages') %> </li>
I also have css as follows:
span.glyphicon-comment {
vertical-align:middle;
margin:auto;
padding:10px;
font-size: 2em;
text-align: right;
a:link {text-decoration:none; background-color:transparent; color:grey;};
a:visited {text-decoration:none;background-color:transparent; color:grey;};
a:hover {text-decoration:none;background-color:transparent; color:dark grey;};
a:active {text-decoration:none;background-color:transparent; color:grey;};
}
628
Simple a href tag. Rails has a built-in method called link_to that allows you to create links in a variety of different ways. Here are a few basic examples. Rails offers a shortcut method to root_path which can be configured in routes.rb.
The first argument for link_to is the text on the link. The second argument? It’s the URL you’re linking to. You can hardcode it if you want, but most of the time you’ll be using a Rails model, or a _path method. Rails will figure things out when you follow the proper conventions.
Now the thing is you cannot directly style the Link using styled components this way. Why ? Because under the hood, Link is just an anchor tag or <a> tag that we are importing from the styled-components. So we can't create a constant variable with this Link. Solution : Use inline style attribute.
stylesheet_link_tag(*sources) public Returns a stylesheet link tag for the sources specified as arguments. If you don’t specify an extension,.css will be appended automatically. You can modify the link attributes by passing a hash as the last argument.
You have to use " around the string, also need to call html_safe method on it.
<%= link_to "<span class=\"glyphicon glyphicon-comment\"></span>".html_safe, page_path('messages') %>
but a better and cleaner way would be
<%= link_to page_path('messages') do %>
<span class="glyphicon glyphicon-comment"></span>
<% end %>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
