Question

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

任何人都可以看到这里出了什么问题吗？

Answer 1

由于某种原因，<a>链接中的ERB语句引起了故障，因此当我将它们切换为时，它就可以正常工作。

仍然不确定为什么，但这就是我发现的工作。

Answer 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作为注释。

希望能帮助人们。

字体真棒5社交媒体图标闪烁！和？

2 个答案: