Zaprojektowałem stronę internetową w HTML i użyłem ikony FontAwesome. Kiedy uruchomię stronę na localhost, ikona pokazuje się dobrze. Ale na adres URL nie działa. Tutaj adres URL: Próbny
oto mój niestandardowy CSS:
@font-face{
font-family:"FontAwesome";
src:url("../font/fontawesome-webfont.eot@v=3.2.1");
src:url("../font/fontawesome-webfont.eot@#iefix&v=3.2.1")
format("embedded-opentype"),url("../font/fontawesome-webfont.woff@v=3.2.1")
format("woff"),url("../font/fontawesome-webfont.ttf@v=3.2.1")
format("truetype"),url("../font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1")
format("svg");font-weight:normal;font-style:normal;
}
I
[class^="icon-"], [class*=" icon-"] {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
text-decoration: inherit;
-webkit-font-smoothing: antialiased;
}
I
.icon-envelope-alt:before{content:"f003";}
.icon-heart:before{content:"f004";}
.icon-star:before{content:"f005";}
.icon-star-empty:before{content:"f006";}
.icon-user:before{content:"f007";}
.icon-film:before{content:"f008";}
.icon-th-large:before{content:"f009";}
.icon-th:before{content:"f00a";}
.icon-th-list:before{content:"f00b";}
.icon-ok:before{content:"f00c";}
.icon-remove:before{content:"f00d";}
.icon-zoom-in:before{content:"f00e";}
.icon-zoom-out:before{content:"f010";}
.icon-power-off:before,.icon-off:before{content:"f011";}
.icon-signal:before{content:"f012";}
Ktoś pomoże mi to naprawić.
Dziękując Tobie.
Odpowiedzi:
0 dla odpowiedzi № 1Twój problem polega na tym, że serwer nie może znaleźć plików w określonej lokalizacji.
Jeśli przejrzysz stronę, zobaczysz te błędy w konsoli:
Failed to load resource: the server responded with a status of 404 (Not Found)
http://qubedns.co.in/codes/design/hotelsr/font/fontawesome-webfont.woff@v=3.2.1 Failed to load resource: the server responded with a status of 404 (Not Found)
http://qubedns.co.in/codes/design/hotelsr/font/fontawesome-webfont.ttf@v=3.2.1 Failed to load resource: the server responded with a status of 404 (Not Found)
Musisz zmienić ścieżkę, aby wspaniałe pliki czcionek mogły być poprawnie załadowane.
0 dla odpowiedzi nr 2
Musisz dołączyć arkusz stylów FontAwesome do nagłówka tagu
<head>
...
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
...
Następnie używasz w menu:
<span class="icon-angle-down" style="color: rgb(51, 51, 51);"></span>
Prawidłowa wersja to:
<i class="fa fa-angle-down" style="color: rgb(51, 51, 51);"></span>
0 dla odpowiedzi № 3
Nie możemy znaleźć czcionki na ścieżce: http://qubedns.co.in/codes/design/font/fontawesome-webfont.eot@v=3.2.1
Ta strona jest niedostępna
DNS_PROBE_FINISHED_NO_INTERNET
Jaką ścieżkę używasz w swoim kodzie
@font-face{
font-family:"FontAwesome";
src:url("../font/fontawesome-webfont.eot@v=3.2.1");
src:url("../font/fontawesome-webfont.eot@#iefix&v=3.2.1")
format("embedded-opentype"),url("../font/fontawesome-webfont.woff@v=3.2.1")
format("woff"),url("../font/fontawesome-webfont.ttf@v=3.2.1")
format("truetype"),url("../font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1")
format("svg");font-weight:normal;font-style:normal;
}
