Niesamowita czcionka nie wyświetla ikony

Question 1

Używam Font Awesome i nie chcę dodawać CSS z HTTP. Pobrałem Font Awesome i umieściłem go w swoim kodzie, ale Font Awesome pokazuje obramowane kwadratowe pole zamiast ikony. Oto mój kod:

<html>
<head>
<link rel="stylesheet" href="../css/font-awesome.css">
    <link rel="stylesheet" href="../css/font-awesome.min.css">
</head>
<body>
<div style="font-size: 44px;">
   <i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
</div>
</body>
</html>

Chciałbym wiedzieć, jak wyświetlić ikonę zamiast obramowanego kwadratowego pola.

Question 2

W moim przypadku popełniłem następujący błąd w moim kodzie CSS.

*{
    font-family: 'Open Sans', sans-serif !important;
}

Spowoduje to zastąpienie wszystkich reguł dotyczących rodzin czcionek na całej stronie. Moim rozwiązaniem było przeniesienie kodu do treści w ten sposób.

body{
    font-family: 'Open Sans', sans-serif;
}

Uwaga: za każdym razem, gdy użyjesz !importantflagi w css, każda inna reguła css zadeklarowana tego samego typu w tym samym elemencie zostanie nadpisana.

Question 3

Po otwarciu font-awesome.min.cssmożesz zobaczyć następującą ścieżkę:

'Fonts/fontawesome-webfont.ttf?v=4.2.0' ...

Oznacza to, że musisz utworzyć katalog, Fontsa następnie skopiować pliki fontawesome-webfont.ttf( fontawesome-webfont.woff, fontawesome-webfont.eot) do tego folderu. Potem wszystko powinno działać dobrze.

Question 4

Należy pamiętać, że nowa wersja (5) niesamowitych czcionek używa "fas"lub "fab"zamiast "fa"prefiksu.

Cytowane z ich strony internetowej:

Przedrostek fa został wycofany w wersji 5. Nowym domyślnym stylem jest styl fas solid i styl fab dla marek.

Dlatego moje czcionki pokazywały puste kwadraty. Teraz naprawione.

Przykładowy kod:

<a class="nav-link" href="//www.facebook.com/xxx" target="_blank"><i class="fab fa-facebook-f"></i></a>

Zobacz: https://fontawesome.com/icons/facebook-f?style=brands

Question 5

Najpierw sprawdź, czy masz class = "fa", a także jakąkolwiek klasę ikony. Więc nie tylko

<i class="fa-pencil" title="Edit"></i>

Ale również

<i class="fa fa-pencil" title="Edit"></i>

Wtedy działa zgodnie z oczekiwaniami. To rozwiązało mój problem.

Question 6

Otwórz swój font-awesome.css tam kod taki jak:

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.5.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.5.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.5.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.5.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

musisz mieć folder taki jak:

font awesome -> css
 -> fonts

lub najłatwiej:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

Question 7

Sprawdź, czy ścieżka do CSSpliku jest poprawna. Wolą raczej linki bezwzględne, są łatwiejsze do zrozumienia, ponieważ wiemy, od czego zaczynamy, a wyszukiwarki będą również preferować je niż linki względne. Aby zmniejszyć przepustowość, użyj raczej łącza z serwerów niesamowitych czcionek:

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css">

Co więcej, jeśli go użyjesz, nie będzie potrzeby przesyłania dodatkowych czcionek na serwer i będziesz mieć pewność, że wskażesz właściwy CSSplik, a także natychmiast skorzystasz z najnowszych aktualizacji.

Question 8

miałem do czynienia z tym samym problemem, a potem zorientowałem się, że muszę użyć nowej wersji (5 i plus)

użyj tego CDN, będzie działać.

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet">

Question 9

Na początek nie powinieneś mieć obu font-awesome.css i font-awesome.min.css

Ogólnie rzecz biorąc, używaj font-awesome.csspodczas programowania, a następnie przełącz się na, font-awesome.min.cssgdy będziesz zadowolony z witryny.

Takie problemy są często powodowane przez względne ścieżki i lokalizacje, więc sprawdź, gdzie znajduje się twój plik HTML w stosunku do css.

Jeśli twój plik html znajduje się w katalogu podstawowym, a css w podfolderze poza katalogiem głównym, potrzebujesz: href="./css/font-awesome.css"(pojedyncza kropka)

Question 10

Wszystkie powyższe są poprawne, ale oprócz tego moim problemem było to, że pobrałem bezpłatną wersję FA5, która nie ma:

font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.eot?v=4.7.0')

Nie mogłem uruchomić wersji 5, więc powróciłem do wersji 4.7.0 z pomocą powyższych postów i rozwiązałem mój problem.

Question 11

miałem ten sam problem ... więc zamiast pobierać niesamowite czcionki, dodałem link do mojego kodu HTML i zadziałało.

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.js" integrity="sha256-2JRzNxMJiS0aHOJjG+liqsEOuBb6++9cY4dSOyiijX4=" crossorigin="anonymous"></script>

Rozwiń fragment

Question 12

Pomyślnie zainstalowałem Font Awesome przy użyciu ich CDN i dołączenia javascript (jak opisano na tej stronie ). Następnie próbowałem skopiować HTML i CSS na kilka starszych stron i nagle zamiast ikon zobaczyłem puste kwadratowe pola.

Widziałem odpowiedź Daniela (powyżej), a ponieważ mój starszy plik CSS był ogromny (i miał wiele lat), podejrzewałem, że to jest problem. Jednak kiedy zajrzałem do Chrome DevTools, naprawdę wyglądało na to, że załadowano Font Awesome:

Spodziewałem się, że czcionka zostanie przekreślona, jeśli wystąpi problem ... Jednak naprawdę wyczerpałem wszystkie moje opcje, więc sprawdziłem obliczone style i wyraźnie zobaczyłem, że czcionka Font Awesome zdecydowanie nie była używana. (Zobacz renderowaną czcionkę na dole)

Mój starszy plik CSS był bałaganem i wolałem go nie dotykać, więc oszukałem, robiąc to - proszę nikomu nie mówić :)

<a class="nav-link fa fa-instagram" style="font-family:FontAwesome;" href="//www.instagram.com/xxxx/" target="_blank"></a>

Warto również zauważyć, że po uaktualnieniu z wersji 4.7.0 Font Awesome do wersji 5.4.1 ten problem zniknął! Użyłem tego przewodnika konfiguracji i tego kodu HTML

<a class="nav-link" href="//www.instagram.com/xxxx/" target="_blank"><i class="fab fa-instagram"></i></a>

Question 13

Dla tych z Was, którzy używają SCSS i pakietu NPM, oto moje rozwiązanie:

npm i --save @fortawesome/fontawesome-free

Następnie u góry pliku SCSS (najlepiej pliku SCSS zaimportowanego w katalogu głównym aplikacji):

@import '@fortawesome/fontawesome-free/css/fontawesome.css';
@import '@fortawesome/fontawesome-free/css/all.css';

Question 14

W moim przypadku: musisz skopiować cały folder font-awesome do folderu css swojego projektu, a nie tylko plik font-awesome.min.css .

Question 15

Wygląda więc na to, że dodanie style='font-weight:normal;'lub zmiana czcionki bezpośrednio w elemencie zastępuje .fas{font-weight:900}definicję w pliku CSS Font Awesome. Domyślam się, że czcionka ma określone definicje w pliku czcionki, z którym działa. Wygląda na to, że font-weightmusi być ustawiony między 501 a 1000, w przeciwnym razie czcionka może wyglądać jak kwadratowy blok.

Question 16

moim problemem była ta, która zdobyła większość głosów

*{
font-family: xxxxx
}

zmiana na to rozwiązała problem

body{
font-family: xxxx
}

Question 17

Być może użyłeś VCS (git lub coś takiego) do przesłania plików ikon na serwer. git mówi:

warning: CRLF will be replaced by LF in webroot/fonts/FontAwesome.otf.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.eot.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.ttf.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.woff.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.woff2.
The file will have its original line endings in your working directory.

Prawdopodobnie musisz naprawić swoje czcionki.

Question 18

Myślę, że nie masz folderu czcionek w folderze głównym, takim jak folder gdzie pozostaje css.

Próbny

A folder css jest podobny

I folder czcionek, taki jak

Mam nadzieję, że to zadziała.

Dzięki Ci.

Question 19

Na MacOS Mojave miałem ten problem w Safari. Niesamowite obrazy działały w Chrome, ale nie w Safari, więc byłem pewien, że to nie była strona.

Muszę je renderować, przechodząc do Preferencji w menu Safari i wyłączając / odznaczając opcję „Zapobiegaj śledzeniu w wielu witrynach” na karcie Prywatność.

Nie wiem, dlaczego to naprawiło, ale tak się stało.

Question 20

Oparty na wersji 5.10.1.

Moje rozwiązanie (lokalnie):

Jeśli używasz „fontawesome.css” lub „fontawesome.min.css”, spróbuj zamiast tego użyć „all.css” (znajdującego się w folderze css).
Foldery „css” i „webfonts” z pobranego pakietu fontawesome muszą znajdować się na tym samym poziomie co inne.

W moim przypadku miałem już folder css, więc właśnie zmieniłem nazwę folderu fontawesome css na „css-fa”.

Mając zarówno "css-fa", jak i "webfonts" w moim folderze css, po prostu połącz je poprawnie w edytorze tekstu i powinno działać.

Np. Link rel = "stylesheet" href = "css / css-fa / all.css"

Question 21

rozwiązano zmieniając docelowy! importantized selektor rodziny czcionek z * { ... } na *:not(i) { ... }

(z preprocesorem scss); Mam nadzieję, że rozwiązałeś

Question 22

Poniższy kod to font-awesome 4.70.0. Aby przejść do niesamowitej czcionki 5.11.2, kliknij tutaj .

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/font- 
awesome/4.7.0/css/font-awesome.min.css">

</head>

<body>

<i class="fa fa-camera-retro" aria-hidden="true"></i>

</html>

Question 23

Używam FontAwesome Pro i rozwiązaniem dla mnie było osadzenie all.min.csszamiast fontawesome.min.css.

Question 24

Postępowałem zgodnie z tym samouczkiem, aby samodzielnie hostować Font Awesome Pro 5.13.

https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself

Z jakiegoś powodu nie mogłem <link href="%PUBLIC_URL%/font-awesome/all.min.css" rel="stylesheet">załadować, webfontsco z kolei spowodowało, że pojawiały się tylko kwadraty. Ale kiedy użyłem, <script defer src="%PUBLIC_URL%/font-awesome/all.min.js"></script>wszystko zaczęło działać. Oba linki zostały dodane w formacie HTML <head>.

Question 25

Próbowałem dodać fa 5.0.13 do drupal 8 za pomocą scss. Style nie są dołączane domyślnie w głównym fa.scss, który musiał dodać je ręcznie.

@import "libraries/fontawesome/fa-brands";
@import "libraries/fontawesome/fa-light";
@import "libraries/fontawesome/fa-regular";
@import "libraries/fontawesome/fa-solid";

Question 26

musisz umieścić plik font-awesome w folderze css i zmienić

href = "../ css / font-awesome.css" do href = "css / font-awesome.css"

Jeszcze jedno, możesz zastąpić ten niesamowity plik css i spróbować tego

.social-media{
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}

.social-media li .fa{ 
  background: #fff;
  color: #262626;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  text-align:center;
  line-height:50px; 
}

.social-media .fa:hover { 
  box-shadow: 5px 5px 5px #000; 
}

.social-media .fa.fa-twitter:hover{
  background:#55acee;
  color:#fff;
 
}

.social-media .fa.fa-facebook:hover{
  background:#3b5998;
  color:#fff;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<ul class="social-media">
  <li><i class="fa fa-twitter fa-2x"></i></li>
  <li><i class="fa fa-facebook fa-2x"></i></li>
 
</ul>

Rozwiń fragment

Question 27

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.js" integrity="sha256-2JRzNxMJiS0aHOJjG+liqsEOuBb6++9cY4dSOyiijX4=" crossorigin="anonymous"></script>

Rozwiń fragment

Question 28

You needed to close your `<link />` 
As you can see in your <head></head> tag. This will solve your problem

<head>
    <link rel="stylesheet" href="../css/font-awesome.css" />
    <link rel="stylesheet" href="../css/font-awesome.min.css" />
</head>

Question 29

Uważaj na Bootstrap! Bootstrap nadpisze klasy .fa. Jeśli przynosisz oba pakiety oddzielnie, myśląc „Użyję Bootstrap do obsługi responsywnych bloków i Font-Awesome do ikon”, musisz zająć się klasami .fa wewnątrz Bootstrap, aby nie kolidowały z podstawą Font-Awesome. sama implementacja.

np. rodzina czcionek „FontAwesome” w Bootstrap będzie kolidować z rodziną czcionek „Font Awesome 5 Free” w Font-Awesome, a zamiast ikony, którą chcesz, otrzymasz białe pole.

Mogą istnieć bardziej przejrzyste sposoby rozwiązania tego problemu, ale jeśli przejrzałeś listę kontrolną, próbując rozwiązać problem „białego pola” i nadal nie możesz go rozgryźć (tak jak ja), może to być odpowiedź, której szukasz dla.

Question 30

W moim przypadku problem był spowodowany użyciem zwykłych stylów ( far), które nie są zawarte w darmowym zestawie. Zmiana, aby fasto naprawić.

Answer 1

99

Używam Font Awesome i nie chcę dodawać CSS z HTTP. Pobrałem Font Awesome i umieściłem go w swoim kodzie, ale Font Awesome pokazuje obramowane kwadratowe pole zamiast ikony. Oto mój kod:

<html>
<head>
<link rel="stylesheet" href="../css/font-awesome.css">
    <link rel="stylesheet" href="../css/font-awesome.min.css">
</head>
<body>
<div style="font-size: 44px;">
   <i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
</div>
</body>
</html>

Chciałbym wiedzieć, jak wyświetlić ikonę zamiast obramowanego kwadratowego pola.

html css font-awesome Ganesh H.
źródło

5

Pytano o to wiele razy. Upewnij się, że jesteś w tym plików czcionek zbyt .. nie tylko CSS stackoverflow.com/questions/14366158/...

Zim

tutaj jest link do przewodnika po font-awesome tourbleshooting na git github.com/FortAwesome/Font-Awesome/wiki/Troubleshooting

Mehavel

zaktualizuj pytanie o strukturę folderów, w której masz folder font-awesome, abyśmy mogli stwierdzić, że „font-awesome.min.css” poprawnie pobiera ścieżkę ttf, czy nie. Tylko css nie zadziała.

Ajit Hogade

stackoverflow.com/a/42355738/397872

rishta

Answer 2

5

Pytano o to wiele razy. Upewnij się, że jesteś w tym plików czcionek zbyt .. nie tylko CSS stackoverflow.com/questions/14366158/...

Zim

Answer 3

tutaj jest link do przewodnika po font-awesome tourbleshooting na git github.com/FortAwesome/Font-Awesome/wiki/Troubleshooting

Mehavel

Answer 4

zaktualizuj pytanie o strukturę folderów, w której masz folder font-awesome, abyśmy mogli stwierdzić, że „font-awesome.min.css” poprawnie pobiera ścieżkę ttf, czy nie. Tylko css nie zadziała.

Ajit Hogade

Answer 5

stackoverflow.com/a/42355738/397872

rishta

Answer 6

84

W moim przypadku popełniłem następujący błąd w moim kodzie CSS.

*{
    font-family: 'Open Sans', sans-serif !important;
}

Spowoduje to zastąpienie wszystkich reguł dotyczących rodzin czcionek na całej stronie. Moim rozwiązaniem było przeniesienie kodu do treści w ten sposób.

body{
    font-family: 'Open Sans', sans-serif;
}

Uwaga: za każdym razem, gdy użyjesz !importantflagi w css, każda inna reguła css zadeklarowana tego samego typu w tym samym elemencie zostanie nadpisana.

Daniel Barde
źródło

4

To było dla mnie rozwiązanie. Miałem *{font-family: Raleway}i zmieniłem to na*.not(i) {font-family: Raleway}

fungusanthrax

Ja też miałem ten problem, ale nie zdawałem sobie z tego sprawy przez wieki, ponieważ w DevTools wyglądało to tak, jakby używano FontAwesome. Zobacz moją odpowiedź, aby uzyskać więcej informacji.

Dagmar,

Answer 7

4

To było dla mnie rozwiązanie. Miałem *{font-family: Raleway}i zmieniłem to na*.not(i) {font-family: Raleway}

fungusanthrax

Answer 8

Ja też miałem ten problem, ale nie zdawałem sobie z tego sprawy przez wieki, ponieważ w DevTools wyglądało to tak, jakby używano FontAwesome. Zobacz moją odpowiedź, aby uzyskać więcej informacji.

Dagmar,

Answer 9

59

Po otwarciu font-awesome.min.cssmożesz zobaczyć następującą ścieżkę:

'Fonts/fontawesome-webfont.ttf?v=4.2.0' ...

Oznacza to, że musisz utworzyć katalog, Fontsa następnie skopiować pliki fontawesome-webfont.ttf( fontawesome-webfont.woff, fontawesome-webfont.eot) do tego folderu. Potem wszystko powinno działać dobrze.

user2980426
źródło

Ponieważ co najmniej 0.8.1 font-awesome nie jest przywoływany. Istnieją trzy summernotepliki w folderze czcionki z rozszerzeniem eot, ttfi woffktóre muszą być rozdzielone.

ficuscr

2

Uważaj, w 4.6.3 (jeśli nie wcześniej) tak fontsnie jest Fontsi na systemie uwzględniającym wielkość liter, który powoduje problemy ...

Jason

1

dlaczego font awesome nie podaje tego na swojej stronie internetowej? to naprawdę nie jest wyraźne.

Matt

Niesamowite! Myślałem, że czcionki musiały znajdować się w tym samym folderze co css, musiały być o jeden folder wyżej.

Giovani Vercauteren

Upewnij się też, że Twoja biblioteka jest aktualna. Miałem wszystkie swoje logo oprócz logo bandcamp. Po pobraniu zaktualizowanej wersji 4.7 i zastąpieniu plików zadziałało.

Ryan Walker

Answer 10

Ponieważ co najmniej 0.8.1 font-awesome nie jest przywoływany. Istnieją trzy summernotepliki w folderze czcionki z rozszerzeniem eot, ttfi woffktóre muszą być rozdzielone.

ficuscr

Answer 11

2

Uważaj, w 4.6.3 (jeśli nie wcześniej) tak fontsnie jest Fontsi na systemie uwzględniającym wielkość liter, który powoduje problemy ...

Jason

Answer 12

1

dlaczego font awesome nie podaje tego na swojej stronie internetowej? to naprawdę nie jest wyraźne.

Matt

Answer 13

Niesamowite! Myślałem, że czcionki musiały znajdować się w tym samym folderze co css, musiały być o jeden folder wyżej.

Giovani Vercauteren

Answer 14

Upewnij się też, że Twoja biblioteka jest aktualna. Miałem wszystkie swoje logo oprócz logo bandcamp. Po pobraniu zaktualizowanej wersji 4.7 i zastąpieniu plików zadziałało.

Ryan Walker

Answer 15

45

Należy pamiętać, że nowa wersja (5) niesamowitych czcionek używa "fas"lub "fab"zamiast "fa"prefiksu.

Cytowane z ich strony internetowej:

Przedrostek fa został wycofany w wersji 5. Nowym domyślnym stylem jest styl fas solid i styl fab dla marek.

Dlatego moje czcionki pokazywały puste kwadraty. Teraz naprawione.

Przykładowy kod:

<a class="nav-link" href="//www.facebook.com/xxx" target="_blank"><i class="fab fa-facebook-f"></i></a>

Zobacz: https://fontawesome.com/icons/facebook-f?style=brands

krystonen
źródło

Zrobiło to dla mnie! Dziwne, że nie zostało zaktualizowane w dokumentacji

GroomedGorilla

To była jedyna rzecz, która działała. Jeśli używasz nowoczesnej wersji, użyj tego.

samurdhilbk

LIVE SAVER! zmiana na "fa fa-bars" borked

paskudny

Dziękuję, dla mnie kilka ikonek z fas, a inne z fab, na przykład fab fa-twitter jest w porządku, ale fas fa-twitter pokazuje biały kwadrat, idź rysunek!

user1620090

Jeśli więc nowa wersja to fas, to dlaczego muszę zmienić moje zajęcia z „fas” na „fa”

Sam.

Answer 16

Zrobiło to dla mnie! Dziwne, że nie zostało zaktualizowane w dokumentacji

GroomedGorilla

Answer 17

To była jedyna rzecz, która działała. Jeśli używasz nowoczesnej wersji, użyj tego.

samurdhilbk

Answer 18

LIVE SAVER! zmiana na "fa fa-bars" borked

paskudny

Answer 19

Dziękuję, dla mnie kilka ikonek z fas, a inne z fab, na przykład fab fa-twitter jest w porządku, ale fas fa-twitter pokazuje biały kwadrat, idź rysunek!

user1620090

Answer 20

Jeśli więc nowa wersja to fas, to dlaczego muszę zmienić moje zajęcia z „fas” na „fa”

Sam.

Answer 21

22

Najpierw sprawdź, czy masz class = "fa", a także jakąkolwiek klasę ikony. Więc nie tylko

<i class="fa-pencil" title="Edit"></i>

Ale również

<i class="fa fa-pencil" title="Edit"></i>

Wtedy działa zgodnie z oczekiwaniami. To rozwiązało mój problem.

Jeszcze jedno pytanie
źródło

1

To zadziałało dla mnie. Dla mnie fab fa-wrap nie działało, ale wtedy fa fa-wrapop działało. Bardzo dziwne, ale rozwiązałem mój problem.

Jordan Schuetz

@JordanSchuetz „fab” jest charakterystyczny dla ikon marek, takich jak „fab fa-facebook-f”. W nowszych wersjach znajdziesz „fas” dla „solidnej” odmiany, więc twoja zostanie naprawiona jako „fas fa-obwiednia” w nowszych wersjach lub „fa fa-koperta” w starszej.

Tessa

Answer 22

1

To zadziałało dla mnie. Dla mnie fab fa-wrap nie działało, ale wtedy fa fa-wrapop działało. Bardzo dziwne, ale rozwiązałem mój problem.

Jordan Schuetz

Answer 23

@JordanSchuetz „fab” jest charakterystyczny dla ikon marek, takich jak „fab fa-facebook-f”. W nowszych wersjach znajdziesz „fas” dla „solidnej” odmiany, więc twoja zostanie naprawiona jako „fas fa-obwiednia” w nowszych wersjach lub „fa fa-koperta” w starszej.

Tessa

Answer 24

Otwórz swój font-awesome.css tam kod taki jak:

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.5.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.5.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.5.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.5.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

musisz mieć folder taki jak:

font awesome -> css
 -> fonts

lub najłatwiej:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

Answer 25

Sprawdź, czy ścieżka do CSSpliku jest poprawna. Wolą raczej linki bezwzględne, są łatwiejsze do zrozumienia, ponieważ wiemy, od czego zaczynamy, a wyszukiwarki będą również preferować je niż linki względne. Aby zmniejszyć przepustowość, użyj raczej łącza z serwerów niesamowitych czcionek:

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css">

Co więcej, jeśli go użyjesz, nie będzie potrzeby przesyłania dodatkowych czcionek na serwer i będziesz mieć pewność, że wskażesz właściwy CSSplik, a także natychmiast skorzystasz z najnowszych aktualizacji.

Answer 26

10

Zrobiłem to samo i nadal mam tylko kwadratowe pudełko

Vipul Hadiya

Answer 27

miałem do czynienia z tym samym problemem, a potem zorientowałem się, że muszę użyć nowej wersji (5 i plus)

użyj tego CDN, będzie działać.

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet">

Answer 28

Na początek nie powinieneś mieć obu font-awesome.css i font-awesome.min.css

Ogólnie rzecz biorąc, używaj font-awesome.csspodczas programowania, a następnie przełącz się na, font-awesome.min.cssgdy będziesz zadowolony z witryny.

Takie problemy są często powodowane przez względne ścieżki i lokalizacje, więc sprawdź, gdzie znajduje się twój plik HTML w stosunku do css.

Jeśli twój plik html znajduje się w katalogu podstawowym, a css w podfolderze poza katalogiem głównym, potrzebujesz: href="./css/font-awesome.css"(pojedyncza kropka)

Answer 29

4

Wszystkie powyższe są poprawne, ale oprócz tego moim problemem było to, że pobrałem bezpłatną wersję FA5, która nie ma:

font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.eot?v=4.7.0')

Nie mogłem uruchomić wersji 5, więc powróciłem do wersji 4.7.0 z pomocą powyższych postów i rozwiązałem mój problem.

Mickers
źródło

1

Miałem również problemy z uruchomieniem wersji 5 + FontAwesome. Zmienił folder „webfonts” na „fonts” w css i umieścił go w ten sam sposób, ale nie działał poprawnie. Zastąpiłem pliki wersją 4.7.0 i działa jak urok. Hrm.

Lisa Cerilli

1

W wersji 5 rodzina czcionek ikon nie jest już „FontAwesome”. W wersji bezpłatnej jest to teraz „Font Awesome 5 Free” i „Font Awesome 5 Pro” w wersji pro. Miałem ten problem, gdy ręcznie korzystałem z kodów znaków w kilku miejscach i przestały działać, ponieważ rodzina czcionek nie została ustawiona.

Tessa,

Answer 30

1

Miałem również problemy z uruchomieniem wersji 5 + FontAwesome. Zmienił folder „webfonts” na „fonts” w css i umieścił go w ten sam sposób, ale nie działał poprawnie. Zastąpiłem pliki wersją 4.7.0 i działa jak urok. Hrm.

Lisa Cerilli

Answer 31

1

W wersji 5 rodzina czcionek ikon nie jest już „FontAwesome”. W wersji bezpłatnej jest to teraz „Font Awesome 5 Free” i „Font Awesome 5 Pro” w wersji pro. Miałem ten problem, gdy ręcznie korzystałem z kodów znaków w kilku miejscach i przestały działać, ponieważ rodzina czcionek nie została ustawiona.

Tessa,

Answer 32

4

miałem ten sam problem ... więc zamiast pobierać niesamowite czcionki, dodałem link do mojego kodu HTML i zadziałało.

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.js" integrity="sha256-2JRzNxMJiS0aHOJjG+liqsEOuBb6++9cY4dSOyiijX4=" crossorigin="anonymous"></script>

Rozwiń fragment

Hrithik verma
źródło

Dziękuję bardzo, poświęcam 24 godziny na naprawienie tego niesamowitego

Mathew Magante

Answer 33

Dziękuję bardzo, poświęcam 24 godziny na naprawienie tego niesamowitego

Mathew Magante

Answer 34

Pomyślnie zainstalowałem Font Awesome przy użyciu ich CDN i dołączenia javascript (jak opisano na tej stronie ). Następnie próbowałem skopiować HTML i CSS na kilka starszych stron i nagle zamiast ikon zobaczyłem puste kwadratowe pola.

Widziałem odpowiedź Daniela (powyżej), a ponieważ mój starszy plik CSS był ogromny (i miał wiele lat), podejrzewałem, że to jest problem. Jednak kiedy zajrzałem do Chrome DevTools, naprawdę wyglądało na to, że załadowano Font Awesome:

Spodziewałem się, że czcionka zostanie przekreślona, jeśli wystąpi problem ... Jednak naprawdę wyczerpałem wszystkie moje opcje, więc sprawdziłem obliczone style i wyraźnie zobaczyłem, że czcionka Font Awesome zdecydowanie nie była używana. (Zobacz renderowaną czcionkę na dole)

Mój starszy plik CSS był bałaganem i wolałem go nie dotykać, więc oszukałem, robiąc to - proszę nikomu nie mówić :)

<a class="nav-link fa fa-instagram" style="font-family:FontAwesome;" href="//www.instagram.com/xxxx/" target="_blank"></a>

Warto również zauważyć, że po uaktualnieniu z wersji 4.7.0 Font Awesome do wersji 5.4.1 ten problem zniknął! Użyłem tego przewodnika konfiguracji i tego kodu HTML

<a class="nav-link" href="//www.instagram.com/xxxx/" target="_blank"><i class="fab fa-instagram"></i></a>

Answer 35

2

Dla tych z Was, którzy używają SCSS i pakietu NPM, oto moje rozwiązanie:

npm i --save @fortawesome/fontawesome-free

Następnie u góry pliku SCSS (najlepiej pliku SCSS zaimportowanego w katalogu głównym aplikacji):

@import '@fortawesome/fontawesome-free/css/fontawesome.css';
@import '@fortawesome/fontawesome-free/css/all.css';

Jeff Diederiks
źródło

Ciekawe dodanie @fortawesome/fontawesome-free/css/all.cssnaprawiło to

Andy Braham

Answer 36

Ciekawe dodanie @fortawesome/fontawesome-free/css/all.cssnaprawiło to

Andy Braham

Answer 37

1

W moim przypadku: musisz skopiować cały folder font-awesome do folderu css swojego projektu, a nie tylko plik font-awesome.min.css .

sst
źródło

Answer 38

Wygląda więc na to, że dodanie style='font-weight:normal;'lub zmiana czcionki bezpośrednio w elemencie zastępuje .fas{font-weight:900}definicję w pliku CSS Font Awesome. Domyślam się, że czcionka ma określone definicje w pliku czcionki, z którym działa. Wygląda na to, że font-weightmusi być ustawiony między 501 a 1000, w przeciwnym razie czcionka może wyglądać jak kwadratowy blok.

Answer 39

1

moim problemem była ta, która zdobyła większość głosów

*{
font-family: xxxxx
}

zmiana na to rozwiązała problem

body{
font-family: xxxx
}

Jamsheer
źródło

Answer 40

Być może użyłeś VCS (git lub coś takiego) do przesłania plików ikon na serwer. git mówi:

warning: CRLF will be replaced by LF in webroot/fonts/FontAwesome.otf.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.eot.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.ttf.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.woff.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.woff2.
The file will have its original line endings in your working directory.

Prawdopodobnie musisz naprawić swoje czcionki.

Answer 41

Myślę, że nie masz folderu czcionek w folderze głównym, takim jak folder gdzie pozostaje css.

Próbny

A folder css jest podobny

I folder czcionek, taki jak

Mam nadzieję, że to zadziała.

Dzięki Ci.

Answer 42

Na MacOS Mojave miałem ten problem w Safari. Niesamowite obrazy działały w Chrome, ale nie w Safari, więc byłem pewien, że to nie była strona.

Muszę je renderować, przechodząc do Preferencji w menu Safari i wyłączając / odznaczając opcję „Zapobiegaj śledzeniu w wielu witrynach” na karcie Prywatność.

Nie wiem, dlaczego to naprawiło, ale tak się stało.

Answer 43

Oparty na wersji 5.10.1.

Moje rozwiązanie (lokalnie):

Jeśli używasz „fontawesome.css” lub „fontawesome.min.css”, spróbuj zamiast tego użyć „all.css” (znajdującego się w folderze css).
Foldery „css” i „webfonts” z pobranego pakietu fontawesome muszą znajdować się na tym samym poziomie co inne.

W moim przypadku miałem już folder css, więc właśnie zmieniłem nazwę folderu fontawesome css na „css-fa”.

Mając zarówno "css-fa", jak i "webfonts" w moim folderze css, po prostu połącz je poprawnie w edytorze tekstu i powinno działać.

Np. Link rel = "stylesheet" href = "css / css-fa / all.css"

Answer 44

0

rozwiązano zmieniając docelowy! importantized selektor rodziny czcionek z * { ... } na *:not(i) { ... }

(z preprocesorem scss); Mam nadzieję, że rozwiązałeś

backciro
źródło

Answer 45

Poniższy kod to font-awesome 4.70.0. Aby przejść do niesamowitej czcionki 5.11.2, kliknij tutaj .

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/font- 
awesome/4.7.0/css/font-awesome.min.css">

</head>

<body>

<i class="fa fa-camera-retro" aria-hidden="true"></i>

</html>

Answer 46

0

Używam FontAwesome Pro i rozwiązaniem dla mnie było osadzenie all.min.csszamiast fontawesome.min.css.

Bruno Leveque
źródło

Answer 47

Postępowałem zgodnie z tym samouczkiem, aby samodzielnie hostować Font Awesome Pro 5.13.

https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself

Z jakiegoś powodu nie mogłem <link href="%PUBLIC_URL%/font-awesome/all.min.css" rel="stylesheet">załadować, webfontsco z kolei spowodowało, że pojawiały się tylko kwadraty. Ale kiedy użyłem, <script defer src="%PUBLIC_URL%/font-awesome/all.min.js"></script>wszystko zaczęło działać. Oba linki zostały dodane w formacie HTML <head>.

Answer 48

problem z tym jsem polega na tym, że plik jest

zbyt

Answer 49

Próbowałem dodać fa 5.0.13 do drupal 8 za pomocą scss. Style nie są dołączane domyślnie w głównym fa.scss, który musiał dodać je ręcznie.

@import "libraries/fontawesome/fa-brands";
@import "libraries/fontawesome/fa-light";
@import "libraries/fontawesome/fa-regular";
@import "libraries/fontawesome/fa-solid";

Answer 50

musisz umieścić plik font-awesome w folderze css i zmienić

href = "../ css / font-awesome.css" do href = "css / font-awesome.css"

Jeszcze jedno, możesz zastąpić ten niesamowity plik css i spróbować tego

.social-media{
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}

.social-media li .fa{ 
  background: #fff;
  color: #262626;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  text-align:center;
  line-height:50px; 
}

.social-media .fa:hover { 
  box-shadow: 5px 5px 5px #000; 
}

.social-media .fa.fa-twitter:hover{
  background:#55acee;
  color:#fff;
 
}

.social-media .fa.fa-facebook:hover{
  background:#3b5998;
  color:#fff;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<ul class="social-media">
  <li><i class="fa fa-twitter fa-2x"></i></li>
  <li><i class="fa fa-facebook fa-2x"></i></li>
 
</ul>

Rozwiń fragment

Answer 51

0

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.js" integrity="sha256-2JRzNxMJiS0aHOJjG+liqsEOuBb6++9cY4dSOyiijX4=" crossorigin="anonymous"></script>

Rozwiń fragment

De Zin Htang
źródło

Działa bardzo dobrze z tym

De Zin Htang

Answer 52

Działa bardzo dobrze z tym

De Zin Htang

Answer 53

You needed to close your `<link />` 
As you can see in your <head></head> tag. This will solve your problem

<head>
    <link rel="stylesheet" href="../css/font-awesome.css" />
    <link rel="stylesheet" href="../css/font-awesome.min.css" />
</head>

Answer 54

Uważaj na Bootstrap! Bootstrap nadpisze klasy .fa. Jeśli przynosisz oba pakiety oddzielnie, myśląc „Użyję Bootstrap do obsługi responsywnych bloków i Font-Awesome do ikon”, musisz zająć się klasami .fa wewnątrz Bootstrap, aby nie kolidowały z podstawą Font-Awesome. sama implementacja.

np. rodzina czcionek „FontAwesome” w Bootstrap będzie kolidować z rodziną czcionek „Font Awesome 5 Free” w Font-Awesome, a zamiast ikony, którą chcesz, otrzymasz białe pole.

Mogą istnieć bardziej przejrzyste sposoby rozwiązania tego problemu, ale jeśli przejrzałeś listę kontrolną, próbując rozwiązać problem „białego pola” i nadal nie możesz go rozgryźć (tak jak ja), może to być odpowiedź, której szukasz dla.

Answer 55

Dlaczego głosowanie przeciw? To skrajny przypadek, ale jest to przyczyna trudna do znalezienia gdzie indziej.

jtubre

Answer 56

-1

W moim przypadku problem był spowodowany użyciem zwykłych stylów ( far), które nie są zawarte w darmowym zestawie. Zmiana, aby fasto naprawić.

Yngve Høiseth
źródło

Niesamowita czcionka nie wyświetla ikony

Odpowiedzi: