Ik heb bootstrap 3.0 gedownload en krijg de glyphicons niet aan het werk. Ik krijg een soort van “E003” fout. Enig idee waarom dit gebeurt? Ik heb het zowel lokaal als online geprobeerd en ik krijg nog steeds hetzelfde probleem.
Antwoord 1, autoriteit 100%
Ik had hetzelfde probleem en kon er geen informatie over vinden, behalve in de verborgen opmerkingen op deze pagina. Mijn lettertypebestanden laadden prima volgens Chrome, maar de pictogrammen werden niet correct weergegeven. Ik maak er een antwoord van, zodat het hopelijk anderen kan helpen.
Er was iets mis met de lettertypebestanden die ik heb gedownload van het aanpassingsprogramma van Bootstrap 3. Ga voor de juiste lettertypen naar de Bootstrap-startpaginaen download het volledige .zip-bestand. Pak de vier lettertypebestanden daar uit naar je lettertypenmap en alles zou moeten werken.
Antwoord 2, autoriteit 50%
Opmerking voor lezers: lees zeker de opmerking van @user2261073’s opmerkingen @Jeff’s antwoordmet betrekking tot een bug in de customizer. Het is waarschijnlijk de oorzaak van uw probleem.
Het lettertypebestand wordt niet correct geladen. Controleer of de bestanden zich op de verwachte locatie bevinden.
@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');
}
Zoals aangegeven door Daniel, kan het ook een mimetype-probleem zijn. De dev-tools van Chrome tonen gedownloade lettertypen op het netwerktabblad:
Antwoord 3, autoriteit 16%
In mijn geval kreeg ik een 404 voor glyphicons-halflings-regular.woffen niet-zichtbare glyphicons in mobiele browsers.
Het lijkt erop dat er enige verwarring bestaat over het MIME-type voor woff, meer dan één MIME-type wordt door verschillende browsers geaccepteerd, maar de W3C zegt:
application/font-woff
Bewerken: na het testen van het volgende MIME-type voor woff werkt momenteel in alle browsers:
application/x-font-woff
Bewerken: de nieuwste versie van Bootstrap op dit moment (3.3.5) gebruikt .woff2-lettertypen met hetzelfde initiële resultaat als .woff, de W3C nog steeds de specificatie definiërenmaar op dit moment lijkt het MIME-type te zijn:
application/font-woff2
Antwoord 4, autoriteit 12%
-Als je het best beoordeelde antwoord hebt gevolgd en het werkt nog steeds niet:
De map FontMOETzich op hetzelfde niveau bevinden als uw CSS-map. Het aanpassen van het pad in Bootstrap.csszal nietwerken.
Bootstrap.cssmoet als volgt naar de map Fontsnavigeren exact:
@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');
}
Antwoord 5, autoriteit 11%
Als de andere oplossingen niet werken, kunt u proberen Glyphicons van een externe bron te importeren, in plaats van te vertrouwen op Bootstrap om alles voor u te doen. Om dit te doen:
Je kunt dit in HTML doen:
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
Of CSS:
@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css")
Met dank aan edsiofi uit deze thread: Bootstrap 3 Glyphicons CDN
Antwoord 6, autoriteit 7%
In het geval dat iemand anders hier terecht is gekomen en Bootstrap >= v4.0 gebruikt: glyphicon-ondersteuning is vervallen
Het relevante deel uit de release-opmerkingen:
Het lettertype van het Glyphicons-pictogram is verwijderd. Als u pictogrammen nodig heeft, zijn er enkele opties:
de upstream-versie van Glyphicons
Bron: https://v4-alpha.getbootstrap.com/migration/#components
Als je glyphicons wilt gebruiken, moet je deze apart downloaden.
Ik heb Font Awesome persoonlijk geprobeerd en het is best goed. Pictogrammen toevoegen is vergelijkbaar met de glypicon-manier:
<i class="fas fa-chess"></i>
Antwoord 7, autoriteit 5%
Ik was deze oude vraag van mij aan het doornemen en aangezien wat tot nu toe het juiste antwoord moest zijn, door mij in de opmerkingen werd gegeven, denk ik dat ik er ook de eer voor verdien.
Het probleem lag in het feit dat de glyphicon-lettertypebestanden die werden gedownload van de customizer-tool van bootstrap niet dezelfde waren als de bestanden die werden gedownload via de omleiding op de startpagina van bootstrap.De bestanden die werken als ze zouden degenen moeten zijn die kunnen worden gedownload via de volgende link:
http://getbootstrap.com/getting-started/#download
Iedereen die problemen heeft met oude slechte customizer-bestanden moet de lettertypen van de bovenstaande link overschrijven.
Antwoord 8, autoriteit 4%
Azure-websites missen woffMIME-configuratie. U moet het volgende item toevoegen aan web.config
<configuration>
<system.webServer>
<staticContent>
<mimeMap fileExtension="woff" mimeType="application/font-woff" />
</staticContent>
</system.webServer>
</configuration>
Antwoord 9, autoriteit 4%
Je kunt deze regel code toevoegen en klaar.
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
Bedankt.
Antwoord 10, autoriteit 3%
Zoals @Stijn beschreef, is de standaardlocatie in Bootstrap.cssonjuist bij het installeren van dit pakket vanuit Nuget.
Verander dit gedeelte zodat het er als volgt uitziet:
@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');
}
Antwoord 11, Autoriteit 2%
IIS zal standaard niet .woff-bestanden serveren, dus in IIS moet u een <mimeMap>invoeren naar uw web.configbestand;
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<staticContent>
<mimeMap fileExtension=".woff" mimeType="application/x-woff" />
</staticContent>
</system.webServer>
</configuration>
Antwoord 12
Heeft u alle onderstaande bestanden in uw lettertypenlijst
glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff
Antwoord 13
Ik heb mijn minder variabelen gewijzigd. Less bestand
Ik heb de variabele gewijzigd
@icon-font-path: "fonts/";
Het origineel was
@icon-font-path: "../fonts/";
het veroorzaakte een probleem
Antwoord 14
Dit is te wijten aan verkeerde codering in bootstrap.cs en bootstrap.min.css. Wanneer u bootstrap 3,0 van de aanklager downloadt, ontbreekt de volgende code:
@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');
}
Aangezien dit de hoofdcode is voor het gebruik van Glyphicons, zal het niet werken…
Download de css-bestanden uit het volledige pakket en deze code wordt geïmplementeerd.
Antwoord 15
Dit was de reden waarom de pictogrammen niet voor mij werden weergegeven:
* {
arial, sans-serif !important;
}
Nadat ik dit deel van mijn CSSheb verwijderd, werkte alles zoals het zou moeten. De !belangrijkste was degene die problemen veroorzaakte.
Antwoord 16
Een ander probleem/oplossing kan deze Bootstrap 2.x-code zijn:
<button class="btn" ng-click="open()"><i class="icon-calendar"></i></button>
en bij migratie op basis van de gids(.icon-* ---> .glyphicon .glyphicon-*):
<button class="btn btn-default" ng-click="open()"><i class="glyphicon-calendar"></i></button>
je vergeet de pictogramklasse toe te voegen (met de lettertypereferentie):
<button class="btn btn-default" ng-click="open()"><i class="glyphicon glyphicon-calendar"></i></button>
Antwoord 17
Hieronder is wat het voor mij heeft opgelost. Ik kreeg de foutmelding “slechte URI” bij gebruik in de Firebug-console. De pictogrammen werden weergegeven als E###-nummers. Ik moest een .htaccess-bestand toevoegen aan mijn ‘fonts’-directory.
<FilesMatch "\.(ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
Mogelijk duplicaat van: Downloadbaar lettertype op Firefox: slechte uri of cross-site toegang niet toegestaan
Antwoord 18
Dit is heel veel een lange shoot, maar het was mijn zaak en omdat het hier niet al is.
Als u Twitter bootstrap van SASS compileert met gulp-sassof grunt-sassIE. node-sass. Zorg ervoor dat je knooppuntmodules up-to-date zijn, vooral als je aan een vrij oud project werkt.
Het blijkt dat vanaf sommige tijd de SASS-richtlijn @at-rootwordt gebruikt in de definitie van de @font-facein glyfhicons, zie https://github.com/twbs/bootstrap-sass/blob/b01ab4942233bd7316a0634472e1243b13fb9f46/ Activa / stylesheets / bootstrap / _glyficons.scss .
De Gotcha hier is dat node-sassIE. libsassondersteun de @at-rootniet als het te oud is. Als dit het geval is, ontvangt u een @font-faceWikkeld in een @at-rootwaar de browser geen idee heeft waarmee u moet doen. Het resultaat hiervan is dat geen lettertype wordt gedownload en u waarschijnlijk afval zult zien in plaats van pictogrammen.
Antwoord 19
Opmerking: hieronder is waarschijnlijk een niche-scenario, maar ik wilde het delen in het geval iemand anders het nuttig zou kunnen vinden.
In een rails-project hergebruiken we nogal wat door een juweeltje dat een rails-motor is met bootstrap-sass. Alles was goed in het hoofdproject met uitzondering van de glyphicon-lettertypepadresolutie.
GET http://0.0.0.0:3000/fonts/bootstrap/glyphicons-halflings-regular.woff 404 (Not Found)
We hebben gevonden dat $bootstrap-sass-asset-helperwas falsetijdens de resolutie toen we verwachtten dat het waar is, dus het pad was anders.
We hebben de $bootstrap-sass-asset-helperveroorzaakt om te worden geïnitialiseerd in de Motor Gem door:
// explicit sprockets import to get glyphicon font paths correct
@import 'bootstrap-sprockets';
@import "bootstrap/variables";
b.g. Dit zorgde ervoor dat het pad oplost naar:
/assets/bootstrap/glyphicons-halflings-regular.woff
Nogmaals, dit zou niet nodig moeten zijn in een normaal rails-project met bootstrap-sass, we zijn toevallig nog veel uitzichten en dit werkte voor ons. Hopelijk kan dit iemand anders helpen.
Antwoord 20
Hier is wat officiële documentatie zegt met betrekking tot lettertypen die niet worden weergegeven.
De locatie van het icoon lettertype wijzigen
Bootstrap Assames Icon Font-bestanden bevinden zich in de map ../Fonts / Map, ten opzichte van de gecompileerde CSS-bestanden. Verplaatsen of hernoemen van die lettertypenbestanden betekent het bijwerken van de CSS op een van de drie manieren:
Wijzig de @ Icon-Font-Path en / of @ Icon-Font-naamvariabelen in de bron minder bestanden.
Gebruik de relatieve URL’s-optie die door de minder compiler wordt verstrekt.
Verander de URL () paden in de gecompileerde CSS.
Gebruik elke optie het beste bij uw specifieke ontwikkelingsopstelling.
anders dan het kan zijn dat u gemist hebt om de map lettertypen naar de hoofdmap
te kopiëren
Antwoord 21
Ik had dit probleem en het werd veroorzaakt door het variabelen. Less bestand. Het overschrijven om de pictogram-font-pad-waarde op te zetten het probleem opgelost.
Het bestandsstructurering ziet er als volgt uit:
\Content
\Bootstrap
\Fonts
styles.less
variables.less
Voeg mijn eigen variabelen toe. Less bestand in de root van inhoud en verwijzen naar dit in stijlen. Niet opgelost de 404-fout.
Variabelen.less bevat:
@icon-font-path: "fonts/";
Antwoord 22
Ik heb bootstrap van Nuget. Toen ik mijn site publiceerde, werkten de glyphs niet.
In mijn geval heb ik het gewerkt aan het instellen van de buildactie voor elk van de lettertypebestanden naar ‘Inhoud’ en stelt ze in om ‘altijd te kopiëren’.
Antwoord 23
Ik had een BOX-breedtecode \ E094 voor glyficon-pijl-omlaag, in feite loste ik het probleem op glyphicon in CSS-klasse zoals dat:
<i class="glyphicon glyphicon-arrow-down"></i>
Als het iemand kan helpen …
Antwoord 24
Zorg ervoor dat u niet over de FONT-familie opgeeft, bijvoorbeeld
*{font-family: Verdana;}
Verwijder het doopvont van de helft van I-elementen.
Antwoord 25
Ik had hetzelfde probleem waar de browser de lettertypenbestanden niet kon vinden, en mijn probleem was het gevolg van uitsluitingen in mijn .htaccess-bestand dat whitelistische bestanden whitelistische bestanden was die niet naar index.phpvoor verwerking. Naarmate het lettertype-bestand niet kon worden geladen, werden de tekens vervangen door blob.
RewriteCond %{REQUEST_URI} !\.(jpg|png|gif|svg|css|js|ico|rss|xml|json)$
RewriteCond %{REQUEST_URI} !-d
RewriteRule ^ index.php [L,QSA]
Zoals u kunt zien, zijn bestanden zoals afbeeldingen, RSS en XML uitgesloten van de herschrijving, maar de lettertypebestanden zijn .woffEN .woff2FISTELS, dus deze ook nodig toegevoegd aan de witte lijst.
RewriteCond %{REQUEST_URI} !\.(jpg|png|gif|svg|css|js|ico|rss|xml|json|woff|woff2)$
RewriteCond %{REQUEST_URI} !-d
RewriteRule ^ index.php [L,QSA]
Door woffen woff2aan de witte lijst toe te voegen, kunnen de lettertypebestanden worden geladen, waarna de glyphicons correct worden weergegeven.
Antwoord 26
U moet deze volgorde instellen:
<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>
Antwoord 27
Wat voor mij werkte, was het vervangen van routes van:
@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');
}
naar
@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');
}
Antwoord 28
Zo neem je het pictogram op in bootstrap 3
<span class="glyphicon glyphicon-bell"></span>
http://glyphicons.bootstrapcheatsheets.com/
Hopelijk helpt dat.
Antwoord 29
@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');}
Ik gebruik bootstrap waarbij de naamruimte en glyphicons niet werken, maar na het toevoegen van de bovenstaande regel in de code werken de glyphicons prima.
Antwoord 30
Ik heb zojuist het lettertype van bootstrap.css hernoemd met Ctrl+c, Ctrl+v en het werkte.