I have the font_awesome5_rails gem installed on my app and have some of the icons working, but the social media icons are flashing between an exclamation mark (!) and a question mark (?).
You can see the problem on my heroku staging site here: https://ssm-staging.herokuapp.com/
The Icons in the header are working perfectly with this ERB:
<%= link_to home_house_path do %>
<%= fa_icon "home", id: "house-icon", class: "header-icon color-house" %>
<% end %>
<%= link_to home_spouse_path do %>
<%= fa_icon "ring", id: "spouse-icon", class: "header-icon color-spouse" %>
<% end %>
<%= link_to home_kids_path do %>
<%= fa_icon "baby", id: "kids-icon", class: "header-icon color-kids" %>
<% end %>
<%= link_to home_self_path do %>
<%= fa_icon "spa", id: "self-icon", class: "header-icon color-self" %>
<% end %>
<%= link_to blogs_path do %>
<%= fa_icon "pen-fancy", id: "blog-icon", class: "header-icon color-neutral" %>
<% end %>
But the social media ones (except the last one, which works fine) in the footer are glitching with this ERB:
<%= fa_icon "facebook-square", class: "social-icon" %>
<%= fa_icon "pinterest-square", class: "social-icon" %>
<%= fa_icon "instagram", class: "social-icon" %>
<%= fa_icon "youtube", class: "social-icon" %>
<%= fa_icon "amazon", class: "social-icon" %>
<%= mail_to("liz#theStaySaneMom.com") do %><%= fa_icon "envelope", class: "social-icon color-black" %><% end %>
I've tried double checking the icon names on the Font Awesome Site but they all check out.
Can anyone see what's going wrong here?
For some reason an ERB statement inside an <a> link caused the glitch, so when I switched them to <i class="fab fa-facebook social-icon"></i> it worked just fine.
Still not sure why, but this is what I found to work.
I know this is old but I've just had this issue and your question helped me.
I'm using the javascript package #fortawesome/fontawesome-free but its the same problem.
FontAwesome 5 javascript converts the <i> tag into an svg and the flashing question/exclamation mark is for when an icon cannot be found. There must be something in the javascript which validates the class (fa-facebook) and also validates the HTML tag (<i>). If you don't use an <i> tag, or the icon doesn't exist (my case was a spelling mistake), you get the flashing error.
<i class="fas fa-check"></i>
<span class="fas fa-check"></span>
Becomes
<svg class="svg-inline--fa fa-check fa-w-16" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">... valid svg here...</svg>
<!-- <i class="fas fa-check"></i> -->
<svg class="svg-inline--fa fa-w-16" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="undefined" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
... valid svg here...</svg>
<!-- <span class="fas fa-check">span</span> -->
Notice the class name for the SVG is missing and the HTML I had is added as a comment.
Hope that helps people out.
Related
I'm trying to insert an image above an anchor tag. Everything works great in development, but when I'm deploying to Heroku, the app crashes.
This is the code I'm using:
<ul class="menu icon-top">
<li>
<%= link_to 'home' do %>
<%= image_tag('icons/home', class: "nav-img") %>
<span>Home</span>
<% end %>
</li>
My routes.rb file:
Rails.application.routes.draw do
root 'static#home'
%w[home about_us training recruitment contact].each do |page|
get page, controller: 'static', action: page
end
end
Heroku crash log (cleaned for better reading):
23: <li>
25: <%= image_tag('icons/home', class: "nav-img") %>
24: <%= link_to 'home' do %>
26: <span>Home</span>
27: <% end %>
28: </li>
FATAL -- :
FATAL -- : app/views/layouts/_altnav.html.erb:25:in `block in _app_views_layouts__altnav_html_erb__'
app/views/layouts/_altnav.html.erb:24:in `_app_views_layouts__altnav_html_erb__'
app/views/layouts/application.html.erb:22:in `_app_views_layouts_application_html_erb__'
You may need to make sure relative paths work correctly...
<li>
<%= link_to 'home' do %>
<%= image_tag('../icons/home', class: "../nav-img") %>
<span>Home</span>
<% end %>
</li>
Also, are you using turbolinks?
Indeed it had something to do with the path of the image.
I managed to fix it by replacing
<%= image_tag('icons/home', class: "nav-img") %>
with
<%= image_tag "icons/home.png", class: "nav-img" %>
Thank you for the answers.
I want to make a link in my nav bar. The problem is that I want an image as the clickable link. So (click on image -> next Site)
this is the code I use now for linking with the site.
<a class="nav" <%= link_to "Home", posts_path %> </a>
You can provide a block to link_to
<%= link_to posts_path do %>
<%= image_tag "image" %>
<% end %>
<%=link_to(image_tag("the_best_image_path.jpg", class: "img_class_goes_here"), posts_path, class: "navbar-brand"%>
<a class="navbar-brand" href="/" style="float:none">
<%= image_tag "yourlogo.png", width:150 %>
</a>
If you're using Active Storage on Rails, you could do this:
Say, you have a model named Product and an attributed named image:
For the Index page
<%= link_to product do %>
<%= image_tag(product.image, class: 'product-image__img') if product.image.attached? %>
<% end %>
OR
<%= link_to(product) do %>
<%= image_tag(product.image, class: 'product-image__img') if product.image.attached? %>
<% end %>
For the Show page
<%= image_tag(#product.image, class: 'product-image__img') if #product.image.attached? %>
I am trying to embed html tag inside rails tag but they are not working .I am even using it with html_safe still they are not working.Here is my code
<li class="blue">
<span>
<%= link_to "#{if user.status == "Active"
then "Status Change"
'<i class="fa fa-eye"></i>'
else "Status Change"
'<i class="fa fa-eye"></i>'
end}","/users/change_status?id="+user.id.to_s %>
</span>
</li>
I am not getting the desired output .It is printing
<`i class="fa fa-eye">
this on the screen
Try:
<li class="blue">
<span>
<%= link_to "/users/change_status?id=#{user.id}" do %>
<% if user.status == "Active" %>
Status Change <i class="fa fa-eye"></i>
<% else %>
Status Change <i class="fa fa-eye"></i>
<% end %>
<% end %>
</span>
</li>
and, for
<%= link_to "/users/change_status?id=#{user.id}" do %>
<% end %>
part, you can use something like this:
<%= link_to change_status_users_path(id: user.id) do %>
<% end %>
Try it with the block notation
<%= link_to 'Status Change' do %>
<i class="fa fa-eye"></i>
<% end %>
I removed the conditionals to make my point clearer.
Try this
'Status Change <i class="fa fa-eye"></i>'.html_safe
I have been trying to make a number of lists where after clicking each list its content gets edited. I'am using twitter bootstrap, embedded HTML in this Ruby on Rails app.
<div class="list-group">
<% #statuses.each do |status| %>
<%= status.content %>
<% end %>
</div>
Here i did not get how to get these <%= link_to to get connected with each <a href="" URL's of the status.
<%= link_to 'Edit', edit_status_path(status) %>
Please help i m totally confused.
Thanks in advance.
If you want the entire status to actually be a link, like you did with a manual anchor tag in your example, then try:
<div class="list-group">
<% #statuses.each do |status| %>
<%= link_to status.content, edit_status_path(status), class: "list-group-item" %>
<% end %>
</div>
Also see http://api.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.html#method-i-link_to.
I have this code with a check method that returns true or false
<%= link_to path, format: 'js' do %>
<i class="<%= check ? "close\"></i>Unfollow member" : "open\"></i>Follow member></i>" %>
<% end %>
</div>
<div class="list-group list-normal m-b-none">
but this outputs
<i class="close"></i>Unfollow member
</a> </div>
<div class=" list-group="" list-normal="" m-b-none"="">
</i>
How can it be ? (I don't want to repeat the check statement inside and outside the i tag)
I think following will be more readable:
<% if check %>
<i class="close">Unfollow member</i>
<% else %>
<i class="open">Follow member></i>
<% end %>
Update:
To make it one liner:
<%= check ? "<i class='close'>Unfollow member</i>" : "<i class='open'>Follow member></i>" %>
<%= link_to path, format: 'js' do %>
<i class="<%= check ? "'close'></i>Unfollow member" : "'open'></i>Follow member>" %></i>
<% end %>
I did not try. But if may works.