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>

html css font-awesome

— Luis Valdez
źródło

1

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

— Shahar

powiązany stackoverflow.com/questions/14366158/…

— Ciro Santilli 郝海东冠状病六四事件法轮功

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

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

— NathanG
źródło

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 lub używa FontAwesomerodziny czcionek. Na przykład musi to być nie tylko
```

```
ale
```

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

— mxro
źródło

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

— Ruard van Elburg
źródło

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.

— Taiguara Andrade
źródło

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

— Chatchawan Wongsiriprasert
źródło

4

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

— lolo
źródło

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 . To było pierwotnie .

Mam nadzieję że to pomoże.

— Goodluck Leo
źródło

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>

— Sundar Gsv
źródło

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>

Rozwiń fragment

— edgarmtze
źródło

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.

— jurev
źródło

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. 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 włącz ją do swojego html.

— Łukasz Dynowski
źródło

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.

— miłość na żywo
źródło

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

— Nurdin BM.
źródło

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

— wiśnia
źródło

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);
}

— Tran Anh Hien
źródło

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

Rozwiń fragment

— John Kesh Mahugu
źródło

1

Udało mi się zmusić Font Awesome do działania przy użyciu pliku all.min.css.

— Rob Breidecker
źródło

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.

— Elliot Robert
źródło

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>

— Waleed Hakim
źródło

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

— Atif Tariq
źródło

-1

Potrzebujesz importera czcionek. | próbować

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

— SIAMWEBSITE
źródło

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

— Crystallove18
źródł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 ).

— Shahar
źródło

@ 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

Ikony FontAwesome nie są wyświetlane. Czemu?

Uwagi

Problem

Rozwiązanie