Pourquoi les icônes de ma police disparaissent-elles au chargement de la page?
Aucune idée pourquoi mon font-awesome icônes d'affichage, d'abord sur la page et puis tourner dans des carrés vides une fois que la page est chargé? Voici mon 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'
Ma demande.fichier css:
*= require_self
*= require_tree .
*= require font-awesome
*/
@import 'twitter/bootstrap';
@import 'font-awesome/font-awesome';
Voici comment je vais appeler les icônes:
<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>
source d'informationauteur Tom Hammond
Vous devez vous connecter pour publier un commentaire.
Il y a actuellement un bug ouvert dans le Chrome web concernant le rendu des polices. Voir iciici et ici.
Depuis cette police-rendu bug existe toujours dans Chrome à partir de la version 33.0.1750.152, une solution de contournement temporaire pour l'instant serait d'obliger les éléments de repeindre sans aucune interaction de l'utilisateur. Cela peut être fait via CSS, par la modification de certaines propriétés de la FontAwesome icônes qui sont en train de disparaître par l'intermédiaire d'un webkit animation (qui utilise toujours les préfixes, malheureusement).
Cette solution simple utilise un fondu dans l'animation:
Ce n'est pas la plus sexy de correction, mais il fait l'affaire en attendant.
Remarque: Toute durée inférieure à 3 s ne semble pas vraiment pour animer le fade-in, donc il semblerait que cela pourrait normalement lorsque google Chrome charges de la police et de l'affiche (avec ses typiques léger retard). Si vous souhaitez que l'effet d'être vu, utiliser 3 ou plus pour l'animation. L'ajout d'un retard à l'animation peut également montrer l'effet avec une durée plus courte, mais ce n'est pas le but de ce correctif, donc l'expérience plus loin sur votre propre si vous le souhaitez.
Aussi, si vous n'avez pas d'autres propriétés que vous souhaitez remplacer, comme la hauteur de la ligne en raison d'un mauvais alignement de FontAwesome icônes et du texte vous pouvez simplement utiliser
.fa
au lieu de la hausse de la spécificité de la règlei.fa
que j'ai utilisé ci-dessus.Je souhaite vraiment que Chrome développeurs ont travaillé sur plus de fonctionnalités de pointe. Le regard et la sensation de plusieurs expérimental styles CSS/effets utilisé pour l'excellent travail se sont dégradés de manière significative dans les dernières versions. Qui me gêne vraiment.
J'ai eu le même problème: il a été résolu en déplaçant les feuilles de style css styles de
<body>
à<head>
section.à l'aide de google chrome autonome de l'outil moniteur de réseau vérifiez les fichiers de police charger correctement, et si ne pas ajouter de la police des extensions de fichier dans les types mime.
https://stackoverflow.com/a/5535020/3212522
Ajouter ceci dans le GEMFILE
Et exécuter
Et Si vous préférez, SCSS, ajoutez ceci à votre application.css.scss fichier: