Font Awesome 5 значков социальных сетей выглядят мигающими!а также? - PullRequest
Новая
       21

Font Awesome 5 значков социальных сетей выглядят мигающими!а также?

0 голосов
/ 24 декабря 2018

В моем приложении установлен драгоценный камень font_awesome5_rails, и некоторые значки работают, но значки социальных сетей мигают между восклицательным знаком (!) И знаком вопроса (?).

Вы можете увидеть проблему на моем промежуточном сайте 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 ]

0 голосов
/ 21 июня 2019

Я знаю, что это старая версия, но у меня возникла эта проблема, и ваш вопрос помог мне.

Я использую пакет javascript @fortawesome/fontawesome-free, но это та же проблема.

FontAwesome 5 javascript преобразует тег <i> в svg, а мигающий вопрос / восклицательный знак предназначен для случаев, когда значок не может быть найден.В 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-код добавлен в качестве комментария.

Надеюсь, что это поможет людям.

0 голосов
/ 25 декабря 2018

По какой-то причине оператор ERB внутри ссылки <a> вызвал сбои, поэтому, когда я переключил их на <i class="fab fa-facebook social-icon"></i>, все работало нормально.

Все еще не уверен, почему, но это то, что я нашелна работу.

...