Почему мои шрифты удивительные значки исчезают при загрузке страницы?

Любая идея, почему мои шрифтовые значки будут отображаться первоначально на странице, а затем превращаются в пустые квадраты после загрузки страницы? Вот мой Gemfile:Почему мои шрифты удивительные значки исчезают при загрузке страницы?

gem 'rails', '4.0.1' 
gem 'bootstrap-sass', '2.3.2.0' 
gem 'bcrypt-ruby', '3.1.2' 
gem 'faker', '1.1.2' 
gem 'will_paginate', '3.0.4' 
gem 'bootstrap-will_paginate', '0.0.9' 
gem "libv8", ">= 3.11.8" 
gem "therubyracer", ">= 0.11.0", :group => :assets, :platform => :ruby, :requir\ 
e => "v8" 
gem 'execjs' 
gem 'rails_12factor', group: :production 
gem 'font-awesome-rails' 
gem 'font-awesome-sass'

Мой файл application.css:

*= require_self 
    *= require_tree . 
    *= require font-awesome 
    */ 

@import 'twitter/bootstrap'; 
@import 'font-awesome/font-awesome';

Вот как я звоню иконки:

<section id="our-services" class="pad-top-50"> 
        <div class="container"> 
        <div class="row"> 
         <div class="col-xs-12 col-sm-4"> 
          <div class="service"> 
           <span class="service-icon"> 
           <i class="fa fa-android"></i> 
           </span>

источник

2014-01-19 Tom Hammond

Вы проверили следующий путь правильно? и вы проверили, как вы его объявили в css – arnold

В настоящее время в Chrome обнаружена ошибка, касающаяся визуализации веб-шрифтов. См. here, here и here.

источник

2014-01-23 23:06:16

Очевидно, что он исправлен и будет находиться в Chrome 33. Теперь все, что вы можете сделать, это навести на эти элементы или щелкнуть их, чтобы заставить их перерисовать нужным шрифтом. – Julik

FWIW Я на 33.0.1750.117 и все еще вижу проблему. –

с помощью Google Chrome WebDeveloper инструмент сетевой проверки монитора файлы шрифтов правильно загрузиться, а если не добавлять расширения шрифтов шрифтов в типе mime. https://stackoverflow.com/a/5535020/3212522

источник

2014-01-19 16:25:47 cparts

Итак, он отлично работает на Chrome. Я пошел вперед и подтолкнул его к Heroku, и он отлично работает на Mozilla в производстве, а также на Chrome, поэтому это должна быть проблема с средой dev. В любом случае, спасибо за тонну за вашу помощь! –

Поскольку эта ошибка от шрифтов до сих пор существует в Chrome с версии 33.0.1750.152, временным обходным решением для этого было бы заставить элементы перерисовываться без какого-либо взаимодействия с пользователем. Это можно сделать с помощью CSS, изменив некоторые свойства значков FontAwesome, которые исчезают с помощью анимации webkit (которая, к сожалению, все еще использует префиксы).

Эта простая фиксация использует замирание-анимации:

i.fa { 
    -webkit-animation: show 1s 1; 
    /* any other properties to override from FontAwesome's default .fa rule */ 
} 
@-webkit-keyframes show { 
    0% { opacity: 0; } 
    100% { opacity: 1; } 
}

Это не самый сексуальный исправить, но она делает это в то же время.

Примечание: Любая продолжительность менее 3 секунд на самом деле не оживляет затухание, поэтому он выглядел бы так, как обычно может выглядеть, когда Chrome загружает шрифт и отображает его (с его типичной небольшой задержкой). Если вы хотите, чтобы эффект был замечен, используйте для анимации 3 или более раз. Добавление задержки к анимации также может показать эффект с меньшей продолжительностью, но это не цель этого исправления, поэтому экспериментируйте дальше, если хотите.

Кроме того, если у вас нет каких-либо других свойств, которые вы хотите переопределить, такие как line-height due to misalignment of FontAwesome icons and text вы могли бы просто использовать .fa вместо правила более высокой специфичности i.fa, что я использовал выше.

Я действительно хочу, чтобы разработчики Chrome работали над дополнительными функциями. Внешний вид нескольких экспериментальных стилей/эффектов CSS, которые были использованы для работы, значительно снизились в последних версиях. Меня это очень раздражает.

источник

2014-03-17 15:12:29 purefusion

Странный, у меня есть элемент , следующий за одним из моих значков, который используется как ярлык. Это замирание отлично работает, чтобы отобразить все значки. По какой-то причине тег , следующий за иконкой, остается скрытым. Добавление «i.fa + small» условие исправляет его, но странно странно странно. –

Will, yep Я вижу различные экземпляры, где некоторые значки появляются без исправления, а некоторые нет. К счастью, у Chrome 34 beta нет такой проблемы, но Google делает свое сладостное время, принося ее к успеху, что смешно иронично, как быстро они вывели предыдущие 33 версии. Shrug. – purefusion

Похоже, вы также можете применить анимацию к телу и исправить все отсутствующие шрифты на странице. – purefusion

У меня была та же проблема: она была решена путем перемещения css-стилей от <body> до <head>.

источник

2014-03-24 14:00:19 Aly

-1

Добавить это в Gemfile

gem "font-awesome-rails"

И запустить

комплект установки.

И если вы предпочитаете SCSS, добавьте это в свой application.css.scss файл:

@import "font-awesome";

источник

2015-10-13 04:55:58

Почему мои шрифты удивительные значки исчезают при загрузке страницы?

ответ

Смежные вопросы