Ikony FontAwesome nie są wyświetlane. Czemu?


123

Ostatnio rozwijam tę witrynę i próbuję umieścić w niej niesamowite ikony czcionek, aby była skalowalna.

Rzecz w tym, że się nie pojawiają.

Spójrz na HTML:

<a class="btn-cta-freequote" href="#">Get a FREE Quote <i class="fa fa-arrow-right"></i></a>

lub

<li><a href="index.html"><span class="fa fa-home fa-2x"></span>Home</a></li>

Umieściłem odniesienie do arkusza stylów w głowie.

Nie wiem, dlaczego się nie pojawiają.

Oto odniesienie:

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

W porządku, oto pełny kod HTML:

<head>
    <meta charset="UTF-8">
    <title>Retrica</title>
    <link src="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

    <link href="style/normalize.css" rel="stylesheet" type="text/css">
    <link href="style/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="style/main.css" rel="stylesheet" type="text/css">
</head>

<body>
    <header class="top-header">
        <div class="container"><!-- Start Container -->
            <div class="row"><!-- Start Row -->
                <div class="span3"><!-- Start Span3 -->
                    <div class="logo"><img src="img/Retrica.@2x.png" alt="" width="67px" height="13,5px"></div>
                </div><!-- End Span3 -->
                <div class="span9"><!-- Start Span9 -->
                    <nav class="main-nav">  <!-- Start Nav -->

                        <a class="btn-cta-freequote" href="#">Get a FREE Quote <i class="fa fa-arrow-right"></i></a>
                        <ul class="nav-ul"> <!-- Start Unordered List -->
                            <li><a href="index.html"><span class="fa fa-home fa-2x"></span>Home</a></li>
                            <li><a href="#"><span class="fa fa-mobile-phone fa-2x"></span> Contact Us</a></li>

                        </ul> <!-- End Unordered List -->
                    </nav><!-- End Nav -->
                </div><!-- End Span9 -->
            </div><!-- End Row -->
        </div><!-- End Container -->
    </header>

    <section>

        <a href="#" class="btncta">Register Now</a>
    </section>

</body>

1
Dla mnie działa dobrze: jsfiddle.net/ZF7x4
Shahar


1
Wypróbuj inną wersję niesamowitej czcionki. Na przykład niektóre ikony nie były wyświetlane w wersji 4.3.0, ale pojawiły się w wersji 4.7.0.
Almir Campos

Sprawdź stackoverflow.com/a/55977898/4874281 . Mam nadzieję, że to komuś pomoże
manian

Odpowiedzi:


105

W ramach twojego odniesienia masz to:

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

W szczególności href=część.

Jednak pod pełnym kodem HTML jest to:

<link src="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

Czy próbowałeś wymianie src=z href=w pełni html stać się tym?

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

U mnie działa: http://codepen.io/TheNathanG/pen/xbyFg


10
Uwaga : czasami możesz zobaczyć puste pola, a następnie dokładnie sprawdź, czy masz plik css i czcionek w tym samym folderze, sprawdź to , nadzieja komuś pomoże.
shaijut

104

Dla poszukiwaczy brakujących ikon niesamowitych czcionek zebrałem kilka pomysłów:

  • Upewnij się, że używasz prawidłowego linku do CDN, takiego jak:

    <link 
      href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" 
      rel="stylesheet"  type='text/css'>
    
  • Jeśli strona używa HTTPS, czy odwołuje się do CSS font-niesamowite za pomocą protokołu HTTPS (wymienić http://ze https://w linku powyżej).

  • Dokładnie sprawdź, czy nie masz włączonego AdBlock Plus lub uBlock. Mogą blokować niektóre ikony.

  • Zresetuj pamięć podręczną przeglądarki. (W Chrome zrób dłuugo kliknij przycisk ponownego ładowania i wybierz twardy reset pamięci podręcznej)

  • Upewnij się, że używany element <span>lub <i>używa FontAwesomerodziny czcionek. Na przykład musi to być nie tylko

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

    ale

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

    Nie zadziała, jeśli w swoim CSS masz coś takiego:

    * {
      font-family: 'Josefin Sans', sans-serif !important;   
    }
    
  • Jeśli używasz IE8, czy używasz podkładki HTML5?

  • Jeśli to nie zadziała, na Wiki Font Awesome znajdują się dalsze pomysły dotyczące rozwiązywania problemów .


3
Dodam: Sprawdź, czy Twój plik .htaccess nie blokuje rozszerzeń ttf, svg, eot lub woff
BassMHL

nadpisuje czcionki! Niewiele odpowiedzi wspomina o tym. Sprawdziłem, sprawdziłem i sprawdziłem i w końcu to rozgryzłem. Napotkałem ten problem w przeszłości i nie wiedziałem dlaczego, ale teraz wiem.
adrianmc

1
Brakowało mi dodania singla fajako pierwszej nazwy klasy. Dzięki. Idealna odpowiedź na znalezienie problemu krok po kroku.
Kai Noack

Dla mnie to było coś innego, co
ustawiało

U mnie miałem „wagę czcionki: 500” (żeby była zgodna z motywem, którego używałem). Musiałem ustawić to na „font-weight: bold”
bowlerae

24

Na początku nie mogłem zmusić tego do pracy z Font Awesome 5 :

<i class="fa fa-sort-down"></i>

Dlatego tu przyjechałem, nie będąc zaznajomionym z niesamowitą czcionką. Kiedy więc spojrzałem dalej, zauważyłem, że mój problem był tylko problemem z wersją.

w3schools pomogło mi w tej sprawie.

Nowością w Font Awesome 5 jest fasprefiks, którego używa Font Awesome 4 fa.

Litera s fasoznacza ciągłe , a niektóre ikony mają również zwykły tryb, określany za pomocą prefiksu far.

Zauważyłem już różne pliki w folderze FontAwesome css, na przykład:

  • all.min.css
  • Brands.min.css
  • fontawesome.min.css
  • regular.min.css
  • solid.min.css

I wtedy zdałem sobie sprawę z mojego błędu. Jedyne, co musiałem zrobić, to dołączyć odpowiedni css do html:

<link rel="stylesheet" href="~/lib/Font-Awesome/css/fontawesome.min.css">
<link rel="stylesheet" href="~/lib/Font-Awesome/css/regular.min.css">
<link rel="stylesheet" href="~/lib/Font-Awesome/css/solid.min.css">

Następnie odwołaj się do właściwego elementu:

<i class="fas fa-sort-down"></i>

Ta konfiguracja działa dla mnie. Chociaż nie wszystkie przedmioty mają odpowiedniki w każdym typie. To nie zadziała:

<i class="far fa-sort-down"></i>

Na marginesie, jeśli nie chcesz odwoływać się do wszystkich oddzielnych plików, wystarczy:

<link rel="stylesheet" href="~/lib/Font-Awesome/css/fontawesome.min.css">
<link rel="stylesheet" href="~/lib/Font-Awesome/css/all.min.css">

Ponadto ściągawka pokazuje, które elementy są dostępne dla każdego typu ikony.
Ruard van Elburg

12

Mój nie działał, ponieważ chciałem mieć ikonę, która nie została wydana w wersji FA, której używałem.

To wyjaśnia, dlaczego niektóre ikony są wyświetlane, a inne nie.

Całkiem oczywiste, ale wydaje mi się, że niektórzy ludzie wciąż na to nabierają. Jak ja.


4
Tak, daje odpowiedź na pytanie.
Bobort

2
Lub próbujesz użyć starszej czcionki, której nie ma już w używanej wersji. Ten na przykład nazywa się po prostu times-circle, a nie times-circle-o, co jest starą nazwą: fontawesome.com/v4.7.0/icon/times-circle-o
smoore4

1
Dziękuję Ci!! To sprawia, że ​​ciągnę za włosy przez cały dzień
24x7

5

Musisz użyć protokołu https dla maxcdn.bootstrapcdn.com. Tylko https w maxcdn obsługuje CORS

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

4

Rozwiązałem ten problem, umieszczając katalog Fonts na tym samym poziomie, co moje pliki CSS.


3

Aby każdy, kto może być sprawdzenie tego w 2018 roku używam czcionki niesamowite 4.7.0 i mam ten problem rozwiązać, po prostu wyjmując sw fasjak widać w kodzie <i class="fa fa-[icon-name]"></i>. To było pierwotnie <i class="fas fa-[icon-name]"></i>.

Mam nadzieję że to pomoże.


Dodatkowo korzystam z serwera node.js.
Goodluck Leo,

Nowością w Font Awesome 5 jest przedrostek fas, Font Awesome 4 używa fa. Z w3schools
Ruard van Elburg

2

Dodam tylko więcej informacji do powyższych odpowiedzi w związku z aktualizacją Fontawesome,

Jeśli używasz czcionki awesome 5,

za. wystarczy skopiować i wkleić poniższy kod HTML,

<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js" integrity="sha384-SlE991lGASHoBfWbelyBPLsUlwY1GwNDJo3jSJO04KZ33K2bwfV9YBauFfnzvynJ" crossorigin="anonymous"></script>

Uwaga: lepiej umieścić wszystkie swoje skrypty w <body> {YOUR_SCRIPT_HERE}</body>tagu i tuż przed (YOUR_CLOSING_BODY)

b. I na przykład

<li><a href="https://stackoverflow.com/users/{USER}" class="social-icons"><i class="fab fa-stack-overflow"></i></a></li>

Co powiesz na lokalne serwowanie css zamiast linkowania do witryny fa?
Ghilteras

to był mój przypadek ... nie miałem pliku js, teraz działa!
Cristian Sepulveda

2

dodanie tego zadziałało dla mnie:

<link href="https://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css" rel="stylesheet">

Spójrz

więc pełny przykład to:

<link href="https://github.com/FortAwesome/Font-Awesome/blob/master/web-fonts-with-css/css/fontawesome.css" rel="stylesheet">
<a class="btn-cta-freequote" href="#">Compute <i class="fa fa-calculator"></i></a>


2

Jeśli zdefiniujesz własny CSS, musisz ustawić font-weight: 900;dla jakiejś nowszej biblioteki Font Awesome (od wersji 5). Bez ustawienia tej grubości czcionki może wyświetlać kwadraty.


2

Uwagi

Ta odpowiedź jest tworzona, gdy najnowsza wersja fontawesome to v5. *, Ale wersja yarn i npm wskazuje na wersję 4. * (21.06.2019). Innymi słowy, wersje zainstalowane za pośrednictwem menedżerów pakietów stoją za najnowszą wersją!

Jeśli zainstalowałeś font-awesomeprzez menedżera pakietów ( yarn lub npm ), pamiętaj, która wersja została zainstalowana. Alternatywnie, jeśli zainstalowałeś już font-awesomedawno temu, sprawdź, jaka wersja została zainstalowana.

Instalowanie font-awesome jako nowej zależności:

$ yarn add font-awesome
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ font-awesome@4.7.0
info All dependencies
└─ font-awesome@4.7.0
Done in 3.32s.

Sprawdzanie, która wersja Font-awesome jest już zainstalowana:

$ yarn list font-awesome
yarn list v1.16.0
warning Filtering by arguments is deprecated. Please use the pattern option instead.
└─ font-awesome@4.7.0
Done in 0.79s.

Problem

Po zainstalowaniu font-awesomezależności, włączasz jeden z tych dwóch plików źródłowych font-awesome.csslub font-awesome.min.css(utworzony w node_modules/font-awesome/css/) do nagłówka swojej strony internetowej, np.

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

Następnie odwiedzasz https://fontawesome.com/ . Wybierasz darmowe ikony i szukasz ikony logowania (jako przykładu). Kopiujesz ikonę, np. <i class="fas fa-sign-in-alt"></i>Wklejasz ją do html i ikona nie jest wyświetlana lub jest wyświetlana jako kwadrat lub prostokąt!

Rozwiązanie

Zasadniczo wersje instalowane za pośrednictwem menedżerów pakietów znajdują się za wersją wyświetlaną na stronie https://fontawesome.com/ . Jak widać, zainstalowaliśmy, font-awesome v4.7.0ale strona zawiera dokumentację dla font-awesome v5.*. Rozwiązanie, odwiedź witrynę internetową, która dokumentuje ikony dla v4.7.0 https://fontawesome.com/v4.7.0 , skopiuj odpowiednią ikonę, np. <i class="fa fa-sign-in" aria-hidden="true"></i>I włącz ją do swojego html.


Wydali tutaj nowy pakiet , który ma najnowszą wersję. Jest również kompatybilny z less i sass \ o /
DerpyNerd

2

Wersja 5:

Jeśli pobrałeś bezpłatny pakiet z tej strony:

https://fontawesome.com/download

Czcionki znajdują się w plikach all.css i all.min.css .

Twoje odniesienie będzie wyglądać mniej więcej tak:

<link href="/MyProject/Content/fontawesome-free-5.10.1-web/css/all.min.css" rel="stylesheet">

Plik fontawesome.css nie zawiera odniesienia do czcionki.


1

Jeśli korzystasz z hostingu Bloggera, użyj tego arkusza stylów adresu URL css:

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

1

Wypróbuj poniższe dwa linki zachowaj w tagu nagłówka.

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

Pobieranie ikon z poniższego linku:

<link rel="stylesheet" href="http://fortawesome.github.io/Font-Awesome/3.2.1/assets/font-awesome/css/font-awesome.css">

1

Używam:

<link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css">
<a class="icon fa-car" aria-hidden="true" style="color:white;" href="http://viettelquangbinh.com"></a>

i stylizuj po:

.icon::before {
display: inline-block;
margin-right: .5em;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0, 0);
}

1

Wydaje mi się, że link do CDN, który opublikowałeś, jest powodem, dla którego nie wyświetlał się poprawnie, możesz użyć tego poniżej, działa idealnie dla mnie.

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



0

Upewnij się, że wstawiłeś rel i wpisz jak w "rel =" stylesheet "type = 'text / css'" w linku do pliku awesomefont css. Bez nich plik nie ładował się poprawnie.


0

Możesz dodać to w pliku .htaccess w katalogu niesamowitej czcionki

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/woff .woff
AddType font/woff .woff2
AddType font/otf .svg

<FilesMatch "\.(ttf|otf|eot|woff)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

0

Testowałem i działa.

Zamiast tego

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

Używaj go z HTTPS

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

-1

Potrzebujesz importera czcionek. | próbować

<style> 
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css););
</style>

-2

Mam swoje do pracy, edytując główny plik font-awesome.css. Ma adresy URL do src (woff, eot itp.). Musiałem je zmienić na ścieżkę bezwzględną, np .: http://mywebsite.com/font-awesome.woff Wtedy zadziałało!


2
Wolałbym tego nie polecać, ponieważ edytujesz plik zewnętrzny. Ty (lub Twój zespół) będziecie musieli o tym pamiętać za każdym razem, gdy będą musieli zaktualizować Fontawesome.
J Cordero

-6

Zmień to:

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

Do tego:

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

Uważam, że potrzebujesz tego, w http:przeciwnym razie nie będzie wiedział, jakiego protokołu użyć (i file:na przykład używa niewłaściwego ).


@ user3870894 Właściwie to hrefmyślałem o javascript. Ale wypróbuj nowy kod.
Shahar

@ user3870894 o_o Opublikuj pełny kod HTML lub przynajmniej główne części. Co mówi konsola? Czy próbowałeś sprawdzić element?
Shahar

2
@Shahar Korzystając //z przeglądarki, wybiera protokół, którego używa żądająca witryna. Kiedy Twoja witryna korzysta z protokołu https, wybiera https. Jeśli używasz protokołu http, używa go do żądania pliku z CDN. Oczywiście, jeśli otworzysz witrynę lokalnie za pomocą file:///, co nie jest zalecane, przeglądarka rzeczywiście spróbuje otworzyć cdn za pomocą fileprotokołu.
Robin van Baalen
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.