Glyphicons

Tags:    glyphicons bootsrap html css

Hej
Jeg er nu gået igang med at opdatere min side fra at bruge Bootstrap 2.3.2 til at anvende den nyere Bootstrap 3.0. Dog giver dette mig problemer.
I den gamle version var alle Glyphicons samlet i en stor billedfil hvor man så via CSS kunne vælge ikonet i billedet. I den nye version har jeg pludselig en EOT-fil, en SVG-fil, TTF-fil og en WOFF-fil som indeholder ikonerne.
Dertil har de også fået nye klasser der skal tilføjes i min HTML for at blive vist korrekt. Dog vises der ingen ikoner når jeg forsøger at anvende dem.
Screenshot

Fold kodeboks ind/udHTML kode 

Jeg inkluderer selvfølgelig bootstrap i mit head-tag.
Fold kodeboks ind/udHTML kode 

Nogen der ved hvorfor det Glyphicon jeg vil have vist ikke vises korrekt? Den gør det samme i Chrome, Safari og Firefox.



Indlæg senest redigeret d. 28.09.2013 17:31 af Bruger #17072
9 svar postet i denne tråd vises herunder
2 indlæg har modtaget i alt 4 karma
Sorter efter stemmer Sorter efter dato
De glyphs, der er med i med i Bootstrap 3 er en font og ikke et billed. Det er derfor det er andre type filer. Fordelen ved fonticons er, at man kan skalere og skifte farve på iconerne uden problem.

Det jeg formoder der er galt er, at du ikke får loadet fontsne korrekt og/eller du har problemer med dine charsets. CSS'en er UTF-8 men din side er måske ISO-8859-1. Jeg formoder du også har problemer med ÆØÅ ? Prøv om du ikke kan få styr på det. Så vil dine glyphs også fungere.



Din Uncaught TypeError lyder ret kritisk - Det burde ikke ske. Har du redigeret i .min filen? Hvis ikke, så prøv Windows metoden og genstart det hele. Dvs. frisk download af hele skidtet.

EDIT: Ah! Du har ikke inkluderet jQuery! Det er krævet for alle JavaScript plugins i Bootstrap



Indlæg senest redigeret d. 29.09.2013 14:14 af Bruger #11328
Mit projekt i Netbeans er opsat med UTF-8 som charset. ÆØÅ virker uden problemer.
Det er netop det der undrer mig, når mine filer er sat til UTF-8 og meta charset er sat til UTF-8



for du nogen 404 fejl i konsolen (@ firebug eller hvad du nu bruger) ?

måske din css fil linker forkert til skrifttyperne



Jeg får dette i Chrome developer tools
Fold kodeboks ind/udKode 

Dette er i bootstrap.min.js på linje 11. Det samme får jeg i Firebug.

Derudover får jeg ingen yderligere fejl eller advarsler



Indlæg senest redigeret d. 28.09.2013 19:36 af Bruger #17072
Hvad får du i network tab? Nogen 404 der?



Nej. Heller ingen 404 der. Der er dog en del 304 Not Modified.

Se Screenshot

Det er jo netop det jeg synes ser mærkeligt ud at jeg ikke får 404-fejl, men der mangler stadig noget alligevel.



Indlæg senest redigeret d. 28.09.2013 22:06 af Bruger #17072
Prøv at indsætte følgende stylesheet og tjek om det fungerer:

Fold kodeboks ind/udHTML kode 




Nu har jeg inkluderet følgende i mit head-tag:
Fold kodeboks ind/udHTML kode 

Dog virker min glyphicons stadig ikke.

Min Uncaught Exception er nu også væk. Jeg har ikke redigeret bootstrap filerne.

EDIT: Hvis det kan være til nogen hjælp, så er her et fuldt output af en side:
Fold kodeboks ind/udHTML kode 




Indlæg senest redigeret d. 04.10.2013 22:56 af Bruger #17072
t