html - Glyphicons - Udvikleren.dk - Programmering, webdesign og grafik

Tags: glyphicons bootsrap html css

Bruger #17072 @ 28.09.13 17:30

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

HTML kode

 <form class="form-signin">
             <h2 class="form-signin-heading">Please sign in</h2>
             <input type="email" class="form-control" placeholder="Email address" autofocus>
             <input type="password" class="form-control" placeholder="Password">
             <label class="checkbox">
                 <input type="checkbox" value="remember-me"> Remember me
             </label>
             <button class="btn btn-lg btn-primary btn-block" type="submit"><span class="glyphicon glyphicon-share"></span> Sign in</button>
         </form>

Jeg inkluderer selvfølgelig bootstrap i mit head-tag.

HTML kode

 <meta charset="utf-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
         <title>Bootstrap</title>
         <meta name="description" content="">
         <meta name="keywords" content="">
         <meta name="robots" content="">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <link href="core/css/bootstrap.min.css" rel="stylesheet" media="screen">
         <link href="core/css/login.css" rel="stylesheet" media="screen">
         <link rel="stylesheet" href="/core/css/bootstrap-responsive.min.css">
         <script src="core/js/bootstrap.min.js"></script>
         <script src="core/js/modernizr-2.6.2-respond-1.1.0.min.js"></script>

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

Bruger #17081 @ 28.09.13 17:46

1.258

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.

Bruger #11328 @ 29.09.13 14:11

1.323

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

Bruger #17072 @ 28.09.13 17:54

152

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

Bruger #3427 @ 28.09.13 18:50

1.520

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

måske din css fil linker forkert til skrifttyperne

Bruger #17072 @ 28.09.13 19:36

152

Jeg får dette i Chrome developer tools

Kode

Uncaught TypeError: Cannot read property 'fn' of undefined

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

Bruger #17081 @ 28.09.13 20:38

1.258

Hvad får du i network tab? Nogen 404 der?

Bruger #17072 @ 28.09.13 22:05

152

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

Bruger #11361 @ 29.09.13 11:26

106

Prøv at indsætte følgende stylesheet og tjek om det fungerer:

HTML kode

 <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

Bruger #17072 @ 29.09.13 14:20

152

Nu har jeg inkluderet følgende i mit head-tag:

HTML kode

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

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:

HTML kode

 <!DOCTYPE html>
 <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
 <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
 <!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
 <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
     <head>
         <meta charset="utf-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
         <title>Site name - Site slogan</title>
         <meta name="description" content="">
         <meta name="keywords" content="">
         <meta name="robots" content="">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <link href="/new_cms/core/css/bootstrap.min.css" rel="stylesheet" media="screen">
         <link href="/new_cms/core/css/login.css" rel="stylesheet" media="screen">        <link rel="stylesheet" href="/new_cms/core/css/bootstrap-responsive.min.css">
         <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
         <script src="/new_cms/core/js/bootstrap.min.js"></script>
         <script src="/new_cms/core/js/modernizr-2.6.2-respond-1.1.0.min.js"></script>
     </head><body>
     <!--[if lt IE 7]>
         <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
     <![endif]-->
 
     <!-- This code is taken from http://twitter.github.com/bootstrap/examples/hero.html -->
     <div class="container">
         <form class="form-signin">
             <h2 class="form-signin-heading">Please sign in</h2>
             <input type="email" class="form-control" placeholder="Email address" autofocus>
             <input type="password" class="form-control" placeholder="Password">
             <label class="checkbox">
                 <input type="checkbox" value="remember-me"> Remember me
             </label>
             <button class="btn btn-lg btn-primary btn-block" type="submit"><span class="glyphicon glyphicon-share"></span> Sign in</button>
         </form>            <hr>
 
             <footer>
                 <p>&copy; Company 2012</p>
             </footer>
 
         </div> <!-- /container -->
 
         <script>
             var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
             (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
             g.src='//www.google-analytics.com/ga.js';
             s.parentNode.insertBefore(g,s)}(document,'script'));
         </script>
     </body>
 </html>

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

Glyphicons

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler