Les glyphicons Bootstrap 3 ne fonctionnent pas

360

J'ai téléchargé bootstrap 3.0 et je n'arrive pas à faire fonctionner les glyphicons. J'obtiens une sorte d'erreur "E003". Des idées pourquoi cela se produit? J'ai essayé à la fois localement et en ligne et j'ai toujours le même problème.

scooterlord
la source
1
où obtenez-vous l'erreur?
Daniel A. White
1
Partout où j'insère les icônes ... Voici l'erreur que j'obtiens. La seule chose que j'ai faite est de télécharger le bootstrap à partir du personnalisateur de site et de remplacer les fichiers précédents (les fichiers de police avaient des noms différents cependant). Maintenant, ils ne fonctionnent pas ... Ont également essayé plusieurs navigateurs, Firefox, Chrome, c'est-à-dire la même chose ... i.imgur.com/2f474kX.jpg
scooterlord
2
Je viens de télécharger la dernière version aujourd'hui et les glyphes ne s'affichent pas si j'utilise le fichier CSS réduit. Si j'utilise le bootstrap.css «normal», tout fonctionne bien.
Antonio Sesto
1
Depuis le 23 juin 2015, incluez la dernière version v3.3.5 maxcdn, vous n'avez aucune erreur
1
J'ai trouvé que j'utilisais les glyphicons sur un fond blanc et je m'attendais à ce qu'ils apparaissent. L'utilisation de <i style = "color: black" class = "glyphicon glyphicon-new-window"> </i> l'a corrigé.
Vijay Vepakomma du

Réponses:

478

J'avais le même problème et je n'ai trouvé aucune information à ce sujet, sauf dans les commentaires cachés sur cette page. Mes fichiers de polices se chargeaient très bien selon Chrome, mais les icônes ne s'affichaient pas correctement. J'en fais une réponse donc j'espère que cela aidera les autres.

Quelque chose n'allait pas avec les fichiers de police que j'ai téléchargés depuis l'outil de personnalisation de Bootstrap 3. Pour obtenir les polices correctes, accédez à la page d'accueil de Bootstrap et téléchargez le fichier .zip complet. Extrayez les quatre fichiers de polices à partir de là vers votre répertoire de polices et tout devrait fonctionner.

Jeff
la source
Vous avez sauvé de nombreuses heures de douleur. J'avais déjà mis une heure de douleur, mais alors j'ai pensé à regarder ici.
Christina
6
l'échange des fichiers de polices pour ceux inclus dans bootstrap-3.0.0 de la page d'accueil getbootstrap.com fonctionne. Merci pour le conseil!
Michal Kopec
11
Bonne réponse! Les fichiers de police du personnalisateur sont corrompus!
Charles Ingalls
2
Je voulais ajouter ma réponse «moi aussi» et dire qu'après avoir gaspillé quelques heures d'effort, et presque de rage quitter ma carrière, j'ai trouvé cette réponse et maintenant j'ai de nouveau des glyphiques à travailler. Je vous remercie!!
dohpaz42
2
J'ai hâte de faire partie de toutes les personnes qui ont réussi, mais en ce moment, malgré avoir essayé presque toutes les solutions et réponses de la pile, je ne peux toujours pas voir les icônes. J'ai même essayé de démarrer une toute nouvelle application MVC 5 et d'utiliser Nuget pour installer la dernière version 3.3.7 de bootstrap qui installe tous les dossiers correctement et rien ne montre un 404 dans l'outil de débogage du navigateur ou quoi que ce soit me disant que les polices ne sont pas chargées et Je peux vous dire que le code de la plage est parfait, alors où est mon problème. Honnêtement, je ne sais pas. J'ai testé tous les navigateurs et aucun ne montre les icônes
Marc Roussel
235

Note aux lecteurs: assurez-vous de lire le commentaire de @ user2261073 et la réponse de @ Jeff concernant un bogue dans le personnalisateur. C'est probablement la cause de votre problème.


Le fichier de police n'est pas chargé correctement. Vérifiez si les fichiers se trouvent à leur emplacement prévu.

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}

Comme indiqué par Daniel, il peut également s'agir d'un problème de type MIME. Les outils de développement de Chrome affichent les polices téléchargées dans l'onglet réseau:

téléchargement de la police de l'onglet réseau chrome

user247702
la source
5
et que les mimetypes sont enregistrés correctement.
Daniel A. White
4
... bien que les fichiers devraient être en place lorsque j'ai téléchargé le fichier bootstrap.zip, j'ai quand même vérifié et tout est en place. Comment vérifier l'enregistrement des mimetypes (=?)
scooterlord
1
@ user2261073, le fichier .eot ne doit pas se charger, sauf si vous utilisez Internet Explorer.
user247702
46
On dirait que j'ai trouvé le problème. Le personnalisateur de bootstrap semble envoyer des polices de tailles différentes de celles qui se trouvent dans le package de bootstrap complet fourni avec les exemples. J'ai remplacé les fichiers et tout fonctionne bien maintenant. C'est probablement un bug dans le personnalisateur de bootstrap? Qui sait. Puis-je signaler cela quelque part afin qu'ils puissent l'examiner?
scooterlord
2
@ user2261073 Vous pouvez le signaler sur le projet GitHub. Il semble déjà y avoir un rapport de bogue actif: github.com/twbs/bootstrap/issues/10008
user247702
78

Dans mon cas, j'obtenais un 404 pour les glyphicons-halflings-regular.woff et les glyphicons non visibles sur les navigateurs mobiles.

Il semble qu'il y ait une certaine confusion au sujet du type MIME pour woff, plus d'un type MIME étant accepté par différents navigateurs, mais le W3C dit :

application/font-woff

Edit: Après avoir testé le type MIME suivant pour woff fonctionne sur tous les navigateurs actuellement:

application/x-font-woff

Edit: la dernière version de Bootstrap à l'heure actuelle (3.3.5) utilise des polices .woff2 avec le même résultat initial que .woff, le W3C définissant toujours la spécification mais pour le moment le type MIME semble être:

application/font-woff2
D.Rosado
la source
17
Cela m'a fait aller dans la bonne direction mais cela m'a aussi donné un autre avertissement dans Chrome ... Le type MIME devrait être en fait: application/x-font-woffalors Firefox et Chrome étaient enfin tous les deux heureux :)
ghiscodage
Merci, c'était le vrai problème pour moi. Tout fonctionnait bien localement, mais une fois publié sur Azure, le type .woff était le seul à poser des problèmes.
Kevin Cloet
56

-Si vous avez suivi la réponse la mieux notée et que cela ne fonctionne toujours pas :

Le Fontdossier DOIT être au même niveau que votre dossier CSS. La correction du chemin d'accès bootstrap.css ne fonctionnera pas .

Bootstrap.cssdoit naviguer vers le Fontsdossier exactement comme ceci:

@font-face {
    font-family: 'Glyphicons Halflings';

    src: url('../fonts/glyphicons-halflings-regular.eot');
    src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
CrazyPaste
la source
3
Je pense que 70% de Glyphicon ne fonctionne pas dans ce cas, bonnes réponses, je mets souvent des fichiers css Bootstrap dans css / bootstrap.
Déplacez
1
Eh bien, le chemin pour moi semble EXACTEMENT tel que prescrit par vous, mais cela ne fonctionne toujours pas pour moi. Le téléchargement du package source et le remplacement des fichiers de polices ne se font pas non plus. Je dois ajouter que certains glyphiques se chargent tandis que d'autres ne le font pas. Pouvez-vous m'aider?
Dark Coder
où est le dossier de polices que je n'ai pas?
Swift
Le cssdossier doit également être un sous-dossier du dossier contenant votre fichier HTML. Donc, au minimum, vous devez avoir 1) votre fichier HTML, 2) un fichier css dans un sous-dossier appelé css, et 3) les fichiers de police dans un sous-dossier appelé fonts.
Kivi Shapiro
Cela ne fait aucune différence lors du chargement à partir de CDN; uniquement lors du chargement local. Ajout d'un lien pour le //netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.cssrésoudre pour moi.
James Wilkins
48

Si les autres solutions ne fonctionnent pas, vous voudrez peut-être essayer d'importer des glyphicons à partir d'une source externe, plutôt que de compter sur Bootstrap pour tout faire pour vous. Pour faire ça:

Vous pouvez soit le faire en HTML:

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">

Ou CSS:

@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css")

Crédit à edsiofi de ce fil: Bootstrap 3 Glyphicons CDN

Chris Tudor
la source
24

Si quelqu'un d'autre se retrouve ici et utilise Bootstrap> = v4.0: le support du glyphicon est abandonné

La partie pertinente des notes de version:

Suppression de la police d'icône Glyphicons. Si vous avez besoin d'icônes, certaines options sont:

la version amont des Glyphicons

Octicons

Police Awesome

Source: https://v4-alpha.getbootstrap.com/migration/#components

Si vous souhaitez utiliser des glyphicons, vous devez le télécharger séparément.

J'ai personnellement essayé Font Awesome et c'est assez bon. L'ajout d'icônes est similaire à la méthode glypicon:

<i class="fas fa-chess"></i>
Caner
la source
21

Je regardais à travers cette vieille question à moi et puisque ce qui était censé être la bonne réponse jusqu'à présent, a été donnée par moi dans les commentaires, je pense que j'en mérite aussi le mérite.

Le problème résidait dans le fait que les fichiers de polices glyphicon téléchargés à partir de l'outil de personnalisation de bootstrap n'étaient pas les mêmes que ceux téléchargés à partir de la redirection trouvée sur la page d'accueil de bootstrap. Ceux qui fonctionnent comme ils le devraient sont ceux qui peuvent être téléchargés à partir du lien suivant:

http://getbootstrap.com/getting-started/#download

Toute personne ayant des problèmes avec d'anciens fichiers de personnalisation incorrects doit remplacer les polices à partir du lien ci-dessus.

scooterlord
la source
Le problème du Customizer a été résolu il y a longtemps. Ce n'est plus un problème dans le Bootstrap actuel.
cvrebert
1
De nos jours, ils rencontrent probablement des problèmes d'emplacement de police d'icône à la place, même si la façon dont les chemins de police d'icône fonctionnent est documentée ...
cvrebert
il y a certaines choses à vérifier pour ce problème. - Vérifiez ce type de mime dans IIS pour votre site .. Il doit être présent pour l'un des problèmes ci-dessus ... - application/vnd.ms-fontobject- .eot - application/x-font-woff- .woff - application/x-font-ttf- .ttf - image/svg+xml- .svg
pedram
Mes glyphicons fonctionnent dans tous les navigateurs sauf IE. IE les affiche au premier chargement - appuyez sur F5 puis ne s'affiche plus. Le DOM est correct, le CSS appliqué est correct. Je ne trouve pas de solution. Des idées?
Skychan
1
Je peux cocher / décocher le "contenu:" \ e080 "" CSS qui définit le contenu à un caractère particulier. Quand je fais cela, la taille de la travée change physiquement de quelque chose à rien et inversement. Cela ressemble donc vraiment à un bug IE - à défaut de dessiner le personnage.
Skychan
18

Les sites Web Azure n'ont pas de configuration woff MIME. Vous devez ajouter l'entrée suivante dans web.config

<configuration>
    <system.webServer>
        <staticContent>
            <mimeMap fileExtension="woff" mimeType="application/font-woff" />
        </staticContent>
    </system.webServer>
</configuration> 
Anton Kalcik
la source
woff, woff2 and ttfextensions?
Kiquenet
16

Comme décrit @Stijn, l'emplacement par défaut dans Bootstrap.cssest incorrect lors de l'installation de ce package à partir de Nuget.

Modifiez cette section pour qu'elle ressemble à ceci:

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('Content/fonts/glyphicons-halflings-regular.eot');
  src: url('Content/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded- opentype'), url('Content/fonts/glyphicons-halflings-regular.woff') format('woff'), url('Content/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('Content/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}
dball
la source
1
Si vous utilisez MOINS, vous pouvez simplement le remplacer dans votre fichier less et modifier les URL pour qu'elles correspondent aux chemins relatifs de votre fichier CSS généré ou les rooter.
Chris Searles
Cela ne devrait plus être un problème avec la dernière version de bootstrap. Mise à jour!
dball
11

Vous pouvez ajouter cette ligne de code et c'est fait.

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">

Merci.

Y. Joy Ch. Singha
la source
Il manque de nombreuses icônes plus récentes ajoutées dans les versions ultérieures de la v3.
James Wilkins
Réponse parfaite, pour moi en tout cas.
thonnor
8

IIS ne serveur pas de .wofffichiers par défaut, donc dans IIS vous devrez ajouter une <mimeMap>entrée à votre web.configfichier;

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <staticContent>
            <mimeMap fileExtension=".woff" mimeType="application/x-woff" />
        </staticContent>
    </system.webServer>
</configuration>
Steve Cooper
la source
Cela évolue beaucoup mieux au lieu d'avoir à se rappeler de le configurer pour chaque machine IIS. Belle mention
Matty Bear
Vous devez mettre à jour votre mimetype pour qu'il soit "application / font-woff" selon les normes actuelles: stackoverflow.com/a/5142316/2267817
Always Learning
application / font-woff vs application / x-woff ?
Kiquenet
7

Avez-vous tous les fichiers ci-dessous dans votre répertoire de polices

glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff
Vicky
la source
Ceci est la bonne réponse. Une personne peut trouver le bon dossier pour placer ces fichiers, en utilisant le détective de liens de Xenu: home.snafu.de/tilman/xenulink.html
Nav
2
Mais, il y a des gens qui ont tous ces fichiers dans le dossier des polices mais qui obtiennent toujours cette erreur si le type mime woff n'est pas enregistré avec IIS.
Stack0verflow
répertoire des polices est requis? Je n'ai que bootstrap.css et bootstrap.js
Kiquenet
7

J'ai modifié mon fichier less variables.less J'ai modifié la variable

@icon-font-path:          "fonts/";    

l'original était

@icon-font-path:          "../fonts/"; 

Cela causait un problème

Cesar Hernandez
la source
2
Pour la gemme bootstrap-sass 3.2.0.1, il semble avoir besoin $icon-font-path: "/assets/bootstrap/".
Joshua Muheim
Certainement la façon de travailler AVEC bootstrap et non contre.
le Hampster le
6

Cela est dû à un mauvais codage dans bootstrap.css et bootstrap.min.css. Lorsque vous téléchargez Bootstrap 3.0 à partir du personnalisateur, le code suivant est manquant:

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}

Puisque c'est le code principal pour utiliser les Glyphicons, cela ne fonctionnera pas ofc ...

Téléchargez les fichiers css à partir du package complet et ce code sera implémenté.

prinsen
la source
6

C'est la raison pour laquelle les icônes ne sont pas apparues pour moi:

* {
    arial, sans-serif !important;
}

Après avoir supprimé cette partie de mon CSS, tout a fonctionné comme il se doit. L'important était celui qui causait des problèmes.

Jo Smo
la source
Je vous remercie! Après m'être gratté la tête pendant plus de 4 heures et avoir essayé de nombreuses choses différentes, je me suis souvenu d'avoir ajouté une police sur "span" avec important. Supprimé et tout est revenu à la normale ..
Ali Haider
5

Un autre problème / solution peut être d'avoir ce code Bootstrap 2.x:

<button class="btn" ng-click="open()"><i class="icon-calendar"></i></button>

et lors de la migration basée sur le guide ( .icon-* ---> .glyphicon .glyphicon-*):

<button class="btn btn-default" ng-click="open()"><i class="glyphicon-calendar"></i></button>

vous oubliez d'ajouter la classe d'icônes (contenant la référence de la police):

<button class="btn btn-default" ng-click="open()"><i class="glyphicon glyphicon-calendar"></i></button>
TWiStErRob
la source
5

Voici ce qui l'a corrigé pour moi. J'obtenais une erreur «mauvais URI» en utilisant la console Firebug. Les icônes apparaissaient sous forme de numéros E ###. J'ai dû ajouter un fichier .htaccess dans mon répertoire 'fonts'. <FilesMatch "\.(ttf|otf|eot|woff)$"> <IfModule mod_headers.c> Header set Access-Control-Allow-Origin "*" </IfModule> </FilesMatch> Copie possible de: Police téléchargeable sur firefox: mauvais URI ou accès intersite non autorisé

Aaron
la source
5

C'est vraiment un long tournage, mais c'était mon cas et puisqu'il n'est pas déjà là.

Si vous compilez Twitter Bootstrap à partir de SASS en utilisant gulp-sassou grunt-sassie. node-sass. Assurez-vous que vos modules de nœuds sont à jour, surtout si vous travaillez sur un projet assez ancien.

Il s'avère que depuis quelque temps, la directive SASS @at-rootest utilisée dans la définition des @font-faceglyphicons, voir https://github.com/twbs/bootstrap-sass/blob/b01ab4942233bd7316a0634472e1243b13fb9f46/assets/stylesheets/bootstrap/scssphicons .

Le gotcha ici est que node-sassie. libsassne soutiennent pas la @at-rootdirective si elle est trop ancienne. Si tel est le cas, vous obtiendrez un @font-faceenveloppé dans @at-rootlequel le navigateur ne sait pas quoi faire. Le résultat est qu'aucune police ne sera téléchargée et vous verrez probablement des ordures au lieu d'icônes.

Victor Häggqvist
la source
4

Remarque: ci-dessous est probablement un scénario de niche, mais je voulais le partager au cas où quelqu'un d'autre pourrait le trouver utile.

Dans un projet de rails, nous réutilisons un peu à travers un joyau utilisé par un moteur Rails bootstrap-sass. Tout allait bien dans le projet principal, à l'exception de la résolution du chemin de police du glyphicon.

GET http://0.0.0.0:3000/fonts/bootstrap/glyphicons-halflings-regular.woff 404 (Not Found) 

Nous avons constaté que $bootstrap-sass-asset-helperc'était falsependant la résolution lorsque nous nous attendions à ce que ce soit vrai, donc le chemin était différent.

Nous avons provoqué l' $bootstrap-sass-asset-helperinitialisation de la gemme moteur en faisant:

// explicit sprockets import to get glyphicon font paths correct
@import 'bootstrap-sprockets';
@import "bootstrap/variables";

Par exemple, cela a conduit le chemin à se résoudre à:

/assets/bootstrap/glyphicons-halflings-regular.woff

Encore une fois, cela ne devrait pas être nécessaire dans tout projet de rails normal bootstrap-sass, il se trouve que nous réutilisons beaucoup de vues et cela a fonctionné pour nous. J'espère que cela peut aider quelqu'un d'autre.

Kross
la source
4

Voici ce que dit la documentation officielle concernant les polices qui ne s'affichent pas.

Modification de l'emplacement des polices d'icônes Bootstrap suppose que les fichiers de polices d'icônes seront situés dans le répertoire ../fonts/, par rapport aux fichiers CSS compilés. Déplacer ou renommer ces fichiers de polices signifie mettre à jour le CSS de trois manières: Modifiez les variables @ icon-font-path et / ou @ icon-font-name dans les fichiers Less sources. Utilisez l'option URL relative fournie par le compilateur Less. Modifiez les chemins url () dans le CSS compilé. Utilisez l'option qui convient le mieux à votre configuration de développement spécifique.

Autre que cela, il se peut que vous ayez manqué de copier le dossier des polices dans le répertoire racine

portes
la source
J'ai oublié de copier le dossier des polices, je ne sais pas où est-il? Quelqu'un peut-il m'aider?
Swift
3

J'ai eu ce problème et il a été causé par le fichier variables.less. Le remplacer pour définir la valeur de l'icône-police-chemin a résolu le problème.

Le fichier structuré ressemble à ceci:

\Content
        \Bootstrap
        \Fonts
 styles.less
 variables.less

L'ajout de mon propre fichier variables.less à la racine du contenu et le référencement dans styles.less ont résolu l'erreur 404.

Variables.less contient:

@icon-font-path:          "fonts/";
Aaron
la source
Cela m'a aidé à réaliser que j'avais annulé ma variable de chemin ... aléatoire mais oui merci!
Taylor A. Leach du
3

J'ai obtenu Bootstrap de NuGet. Quand j'ai publié mon site, les glyphes ne fonctionnaient pas.

Dans mon cas, je l'ai fait fonctionner en définissant l'action de génération pour chacun des fichiers de police sur «Contenu» et en les définissant sur «Copier toujours».

Eric
la source
3

j'avais un code de largeur de boîte \ e094 pour glyphicon-arrow-down, en fait j'ai résolu le problème en ajoutant du glyphicon dans la classe css comme ça:

<i class="glyphicon  glyphicon-arrow-down"></i>

si cela pouvait aider quelqu'un ...

Pierre-Olivier Pignon
la source
Mec, c'était aussi mon problème en utilisant le CDN
Richard Barker
3

Assurez-vous de ne pas trop spécifier la famille de polices, par exemple

*{font-family: Verdana;}

supprimera la police halflings des éléments i.

S ..
la source
3

Je rencontrais le même problème lorsque le navigateur n'a pas pu trouver les fichiers de polices et mon problème était dû à des exclusions dans mon fichier .htaccess qui constituait une liste blanche de fichiers qui ne devaient pas être envoyés index.phppour traitement. Comme le fichier de police n'a pas pu être chargé, les caractères ont été remplacés par BLOB.

RewriteCond %{REQUEST_URI} !\.(jpg|png|gif|svg|css|js|ico|rss|xml|json)$
RewriteCond %{REQUEST_URI} !-d
RewriteRule ^ index.php [L,QSA]

Comme vous pouvez le voir, les fichiers comme les images, rss et xml sont exclus de la réécriture, mais les fichiers de police le sont .woffet les .woff2fichiers, il fallait donc également les ajouter à la liste blanche.

RewriteCond %{REQUEST_URI} !\.(jpg|png|gif|svg|css|js|ico|rss|xml|json|woff|woff2)$
RewriteCond %{REQUEST_URI} !-d
RewriteRule ^ index.php [L,QSA]

L'ajout de woffet woff2à la liste blanche permet de charger les fichiers de police et les glyphicons devraient alors s'afficher correctement.

worldofjr
la source
2

Vous devez définir par cette commande:

<link rel="stylesheet" href="path/bootstrap.min.css"> 
<style type="text/css"> 
     @font-face {   font-family: 'Glyphicons Halflings';   
     src: url('../fonts/glyphicons-halflings-regular.eot');   
     src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), 
     url('../fonts/glyphicons-halflings-regular.woff') format('woff'),  
     url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), 
     url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg'); } 
</style>
nenad
la source
2

Ce qui a fonctionné pour moi, c'était de remplacer les itinéraires de:

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}

à

@font-face {
  font-family: 'Glyphicons Halflings';

  src: url('/assets/glyphicons-halflings-regular.eot');
  src: url('/assets/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
  url('/assets/fonts/glyphicons-halflings-regular.woff') format('woff'),
  url('/assets/glyphicons-halflings-regular.ttf') format('truetype'),
  url('/assets/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
Tabi Vicuna
la source
2
@font-face {
     font-family: 'Glyphicons Halflings';
      src: url('../fonts/glyphicons-halflings-regular.eot');
      src: url('../fonts/glyphicons-halflings-regular.eot?#iefix')         format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');}

J'utilise bootstrap avec l'espace de noms et les glyphicons ne fonctionnent pas, mais après avoir ajouté la ligne ci-dessus dans le code, les glyphicons fonctionnent correctement.

Ratan Paul
la source
2

Je viens de renommer la police de bootstrap.css en utilisant Ctrl + c, Ctrl + v et cela a fonctionné.

Lanlan82
la source