字体真棒 5 个社交媒体图标显示为闪烁！和？答案

【问题标题】：Font Awesome 5 Social Media Icons Appearing as Flashing ! and?字体真棒 5 个社交媒体图标显示为闪烁！和？
【发布时间】：2018-12-24 20:46:22
【问题描述】：

我在我的应用程序上安装了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 上的图标名称，但它们都已检出。

谁能看到这里出了什么问题？

【问题讨论】：

标签： font-awesome erb

【解决方案1】：

由于某种原因，<a> 链接中的 ERB 语句导致了故障，所以当我将它们切换到  时，它工作得很好。

仍然不知道为什么，但这是我发现的工作。

【讨论】：

【解决方案2】：

我知道这很旧，但我刚遇到这个问题，你的问题帮助了我。

我正在使用 javascript 包 @fortawesome/fontawesome-free，但同样的问题。

FontAwesome 5 javascript 将 标记转换为 svg，闪烁的问号/感叹号用于无法找到图标时。 javascript 中必须有一些东西可以验证类 (fa-facebook) 并验证 HTML 标记 ()。如果您不使用 标签，或者该图标不存在（我的情况是拼写错误），则会出现闪烁错误。

<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 已添加为注释。

希望对人们有所帮助。

【讨论】：