Font显示为闪烁的5个社交媒体图标！然后呢？
我已经在我的应用程序上安装了font_awesome5_rails gem，并且有一些图标在工作，但社交媒体图标在感叹号(!)之间闪烁。和一个问号(?)。
你可以在我的heroku临时站点上看到这个问题：https://ssm-staging.herokuapp.com/
标题中的图标与此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 %>但页脚中的社交媒体(除了最后一个，它运行良好)在这个ERB中出现了问题：
<a href="https://www.facebook.com/TheStaySaneMom/" target="_blank"><%= fa_icon "facebook-square", class: "social-icon" %></a>
<a href="https://www.pinterest.com/theStaySaneMom/" target="_blank"><%= fa_icon "pinterest-square", class: "social-icon" %></a>
<a href="https://www.instagram.com/theStaySaneMom/" target="_blank"><%= fa_icon "instagram", class: "social-icon" %></a>
<a href="https://www.youtube.com/channel/UC_g4NFVoQi4t2PbA23q0_VQ" target="_blank"><%= fa_icon "youtube", class: "social-icon" %></a>
<a href="https://pages.convertkit.com/8d96562969/8204904d02" target="_blank>"><%= fa_icon "amazon", class: "social-icon" %></a>
<%= mail_to("liz@theStaySaneMom.com") do %><%= fa_icon "envelope", class: "social-icon color-black" %><% end %>我试过仔细检查Font Awesome Site上的图标名称，但它们都没问题。
有人能看到这里出了什么问题吗？
回答 2
Stack Overflow用户
发布于 2018-12-25 09:28:31
由于某些原因，<a>链接中的ERB语句导致了故障，所以当我将它们切换到<i class="fab fa-facebook social-icon"></i>时，它工作得很好。
仍然不确定为什么，但这是我发现的工作。
Stack Overflow用户
发布于 2019-06-21 19:40:01
我知道这很老，但我刚刚遇到这个问题，你的问题对我很有帮助。
我使用的是javascript包@fortawesome/fontawesome-free，但问题是一样的。
SVG5Javascript会将<i>标签转换为FontAwesome，并且在找不到图标时会出现闪烁的问号/感叹号。javascript中必须有一些东西可以验证类(fa-facebook)，也可以验证HTML标签(<i>)。如果不使用<i>标记，或者图标不存在(我的例子是拼写错误)，就会出现闪烁错误。
<i class="fas fa-check"></i>
<span class="fas fa-check"></span>变成了
<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> -->
注意，SVG的类名丢失了，我拥有的HTML被添加为注释。
希望这能帮助人们摆脱困境。
https://stackoverflow.com/questions/53917564
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号