Niesamowita czcionka nie wyświetla ikony

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.

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.

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.

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

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.

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">

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.

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">

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)

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.

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>

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>

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';

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

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.

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
}

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.

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.

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.

Oparty na wersji 5.10.1.

Moje rozwiązanie (lokalnie):

1. Jeśli używasz „fontawesome.css” lub „fontawesome.min.css”, spróbuj zamiast tego użyć „all.css” (znajdującego się w folderze css).

2. 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"

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

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

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>

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

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>.

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";

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>

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>

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.

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ć.