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/[email protected]" 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
źródło
Odpowiedzi:
W ramach twojego odniesienia masz to:
W szczególności
href=
część.Jednak pod pełnym kodem HTML jest to:
Czy próbowałeś wymianie
src=
zhref=
w pełni html stać się tym?U mnie działa: http://codepen.io/TheNathanG/pen/xbyFg
źródło
Dla poszukiwaczy brakujących ikon niesamowitych czcionek zebrałem kilka pomysłów:
Upewnij się, że używasz prawidłowego linku do CDN, takiego jak:
Jeśli strona używa HTTPS, czy odwołuje się do CSS font-niesamowite za pomocą protokołu HTTPS (wymienić
http://
zehttps://
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żywaFontAwesome
rodziny czcionek. Na przykład musi to być nie tylkoale
Nie zadziała, jeśli w swoim CSS masz coś takiego:
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 .
źródło
fa
jako pierwszej nazwy klasy. Dzięki. Idealna odpowiedź na znalezienie problemu krok po kroku.Na początku nie mogłem zmusić tego do pracy z Font Awesome 5 :
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.
Zauważyłem już różne pliki w folderze FontAwesome css, na przykład:
I wtedy zdałem sobie sprawę z mojego błędu. Jedyne, co musiałem zrobić, to dołączyć odpowiedni css do html:
Następnie odwołaj się do właściwego elementu:
Ta konfiguracja działa dla mnie. Chociaż nie wszystkie przedmioty mają odpowiedniki w każdym typie. To nie zadziała:
Na marginesie, jeśli nie chcesz odwoływać się do wszystkich oddzielnych plików, wystarczy:
źródło
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.
źródło
Musisz użyć protokołu https dla maxcdn.bootstrapcdn.com. Tylko https w maxcdn obsługuje CORS
źródło
Rozwiązałem ten problem, umieszczając katalog Fonts na tym samym poziomie, co moje pliki CSS.
źródło
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
s
wfas
jak 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.
źródło
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,
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
źródło
dodanie tego zadziałało dla mnie:
Spójrz
więc pełny przykład to:
źródło
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.źródło
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-awesome
przez menedżera pakietów ( yarn lub npm ), pamiętaj, która wersja została zainstalowana. Alternatywnie, jeśli zainstalowałeś jużfont-awesome
dawno temu, sprawdź, jaka wersja została zainstalowana.Instalowanie font-awesome jako nowej zależności:
Sprawdzanie, która wersja Font-awesome jest już zainstalowana:
Problem
Po zainstalowaniu
font-awesome
zależności, włączasz jeden z tych dwóch plików źródłowychfont-awesome.css
lubfont-awesome.min.css
(utworzony wnode_modules/font-awesome/css/
) do nagłówka swojej strony internetowej, np.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.0
ale strona zawiera dokumentację dlafont-awesome v5.*
. Rozwiązanie, odwiedź witrynę internetową, która dokumentuje ikony dlav4.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.źródło
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:
Plik fontawesome.css nie zawiera odniesienia do czcionki.
źródło
Jeśli korzystasz z hostingu Bloggera, użyj tego arkusza stylów adresu URL css:
źródło
Wypróbuj poniższe dwa linki zachowaj w tagu nagłówka.
Pobieranie ikon z poniższego linku:
źródło
Używam:
i stylizuj po:
źródło
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.
źródło
Udało mi się zmusić Font Awesome do działania przy użyciu pliku all.min.css.
źródło
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.
źródło
Możesz dodać to w pliku .htaccess w katalogu niesamowitej czcionki
źródło
Testowałem i działa.
Zamiast tego
Używaj go z HTTPS
źródło
Potrzebujesz importera czcionek. | próbować
źródło
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!
źródło
Zmień to:
Do tego:
Uważam, że potrzebujesz tego, w
http:
przeciwnym razie nie będzie wiedział, jakiego protokołu użyć (ifile:
na przykład używa niewłaściwego ).źródło
href
myślałem o javascript. Ale wypróbuj nowy kod.//
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ąfile
protokołu.