Używam Twitter Bootstrap i mam problemy z wyświetlaniem ikon. Próbuję odtworzyć jeden z przykładów tutaj: http://fortawesome.github.io/Font-Awesome/#examples
Oto mój kod:
<head>
<meta charset="utf-8"/>
<script type="text/javascript" src="assets/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/font-awesome.min.css">
</head>
<div class="control-group">
<p><i class="icon-camera-retro icon-large"></i> icon-camera-retro</p>
<p><i class="icon-camera-retro icon-2x"></i> icon-camera-retro</p>
<p><i class="icon-camera-retro icon-3x"></i> icon-camera-retro</p>
<p><i class="icon-camera-retro icon-4x"></i> icon-camera-retro</p>
</div>
Ikony w ogóle się nie pojawiają; czy muszę linkowaćdo dowolnego pliku obrazu ikony lub czegoś podobnego? Testuję w Firefoksie, ale przykładowa witryna Font-Awesome ładuje się poprawnie, więc jestem pewien, że wybór przeglądarki nie jest problemem. Każda pomoc byłaby mile widziana!
Odpowiedzi:
0 dla odpowiedzi № 1Czy masz zainstalowany Firebug? Powinieneś sprawdzić 404 błędy w zakładce Sieć, z twojego opisu „Zgaduję, że nie umieściłeś plików czcionek na swoim serwerze we właściwej lokalizacji.
Jeśli spojrzysz na pierwsze kilka wierszy font-awesome.css, zobaczysz następującą definicję:
@font-face {
font-family: "FontAwesome";
src: url("../font/fontawesome-webfont.eot?v=3.0.1");
src: url("../font/fontawesome-webfont.eot?#iefix&v=3.0.1") format("embedded- opentype"),
url("../font/fontawesome-webfont.woff?v=3.0.1") format("woff"),
url("../font/fontawesome-webfont.ttf?v=3.0.1") format("truetype");
font-weight: normal;
font-style: normal;
}
Pamiętaj, aby pobrać pliki, do których odwołuje się w CSS (które znajdziesz tutaj) na twój serwer i umieść go pod aktywa / czcionka.
0 dla odpowiedzi nr 2
Upewnij się, że skopiowałeś folder „Font” w programie Font Awesome do folderu „zasoby”.
Czcionka niesamowita zastępuje twitter bootstrap „ikony”, które używają ../img/glyphicons-halflings.png
[class^="icon-"], [class*=" icon-"] {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
text-decoration: inherit;
-webkit-font-smoothing: antialiased;
display: inline;
width: auto;
height: auto;
line-height: normal;
vertical-align: baseline;
background-image: none;
background-position: 0% 0%;
background-repeat: repeat;
margin-top: 0;
}
Potrzebne będą pliki czcionek do renderowania ikon na stronie;)