Czcionka Awesome nie działa, ikony wyświetlane jako kwadraty

224

Próbuję więc stworzyć prototyp strony marketingowej i używam Bootstrap i nowego pliku Font Awesome. Problem polega na tym, że kiedy próbuję użyć ikony, wszystko, co jest renderowane na stronie, to duży kwadrat.

Oto jak dołączam pliki do głowy:

<head>
        <title>Page Title</title>
        <link rel="stylesheet" href="css/bootstrap.css">
        <link rel="stylesheet" href="css/bootstrap-responsive.css">
        <link rel="stylesheet" href="css/font-awesome.css">
        <link rel="stylesheet" href="css/app.css">
        <!--[if IE 7]>
            <link rel="stylesheet" href="css/font-awesome-ie7.min.css">
        <![endif]-->
</head>

A oto przykład mojej próby użycia ikony:

<i class="icon-camera-retro"></i>

Ale wszystko to renderowane jest na dużym kwadracie. Czy ktoś wie, co się dzieje?

css html twitter-bootstrap font-awesome Connor Black
źródło

Czy importujesz czcionkę?

mayhewr

Prawdopodobnie nie. Myślałem, że musisz tylko dołączyć .cssplik.

Connor Black,

Tytuł sugeruje, że problem dotyczy tylko Chrome. Czy ładuje się w innych przeglądarkach, czy plik czcionki, do której się odwołuje, wyświetla 404?

cimmanon

Nie można znaleźć kroku 3 w powyższym linku od sierpnia 2016 r ... Jakieś przekierowania?

Saurabh Tiwari,

Prawdopodobnie zapomniałeś skopiować folder webfont?

entithat

Odpowiedzi:

149

Zgodnie z dokumentacją (krok 3) należy zmodyfikować dostarczony plik CSS, aby wskazywał lokalizację czcionki w witrynie.

mayhewr
źródło

Świetna odpowiedź, aby podać dodatkowe informacje, możesz również umieścić czcionki w domyślnej ścieżce podanej przez css, po prostu otwórz Font-awesome.css, a znajdziesz następujący wpis: @ font-face {font-family: „FontAwesome”; src: url ('../ font / fontawesome-webfont.eot? v = 3.2.1'); src: url ('../ font / fontawesome-webfont.eot? # iefix & v = 3.2.1')

— Braulio

Tylko dla przyszłych czytników ASP.NET MVC z tym samym problemem: Jeśli masz wszystkie foldery we właściwym miejscu, sprawdź, czy dodałeś typ MIME do pliku web.config, jak wskazano tutaj: stackoverflow.com/questions/4015816/...

— jpgrassi

Jeśli korzystasz ze schematu URI danych z wersją base64 czcionki (można łatwo przekonwertować online), nie musisz się martwić o właściwą ścieżkę pliku i hosting zasobów.

— RenaissanceProgrammer

Uwaga : jeśli nie chcesz modyfikować css, po prostu umieść css i czcionki w tym samym folderze, zaznacz to

— shaijut

@tutuca: Nie każdy może korzystać z CDN.

— Wyścigi lekkości na orbicie

188

Musisz mieć 2 klasach faklasy i klasy, która identyfikuje żądaną ikonę fa-twitter, fa-searchitp ...

<!-- Wrong -->
<i class="fa-search"></i>    

<!-- Correct -->
<i class="fa fa-search"></i>

— Nabil Kadimi
źródło

To powinna być najlepsza odpowiedź, CSS wskazywał właściwą lokalizację plików czcionek, o ile ich nie przenosisz - to doprowadzało mnie do ściany, dziękuję

— alex3410

Uwaga: „Prefiks fa został wycofany w wersji 5. Nowe ustawienie domyślne to fas solid style i super style dla marek”.

— Terje Solem

To naprawiło to dla mnie! Używam Angulara (wydaje mi się, że 5) razem z primengiem i wydaje się, że niesamowite czcionki działały już np. W definicjach MenuItem wewnątrz xx.component.ts (ikony renderowane poprawnie). Jednakże: podczas dodawania coś do xx.component.html (np p-przycisk z ikoną), jeden musi dodać fa klasę i FA <> cokolwiek ikona!

— Igor

@TerjeSolem podane informacje są bardzo ważne. To rozwiązało mój problem. ponieważ korzystałem ze starszej wersji, ale korzystałem z „fas” dzięki

— MindRoasterMir

🤦‍♂️ Wielkie dzięki! Tak samo było z otwartymi ikonami oi oi -... Straciłem pierwsze oi.

— Alexandr

Użyj tego

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

Miałem podobny problem z Amazon Cloudfront CDN, ale problem został rozwiązany po rozpoczęciu ładowania go z maxcdn

— Kumar Deepam
źródło

zakłada to, że chcesz użyć CDN z font-awesome. W przypadku komercyjnego środowiska produkcyjnego nie zrobiłbym tego.

— Jay Edwards,

Może to pomóc, sprawdź , czy nie zmieniłeś przypadkowo rodziny czcionek na ikonie. Jeśli zmieniłeś rodzinę czcionek elementu .fa z: FontAwesome ikona nie będzie wyświetlana. To zawsze coś głupiego i małego.

Mam nadzieję, że komuś pomoże.

— Bren1818
źródło

BINGO! Dzięki wielkie. Interfejs Metro-UI zastąpił niesamowitą rodzinę czcionek. Musiałem dodać: .fa {font-family: 'FontAwesome'! Ważne; } to zadziałało.

Debbie A

Tak. Głupiutki i mały. To - zmiana czcionki na coś innego i wpływanie na niesamowite czcionki - zdarzyło mi się tyle razy, że stało się głupie.

Edd

Tak - ta wina była winna (ściślej mówiąc, ważna zasada!): * {Font-family: 'Source Sans Pro'! Ważne}

Svet

Jest to najważniejsza i przydatna wskazówka dotycząca korzystania z Font Awesome, aby uniknąć utraty czasu na znalezienie problemu.

Dez

Jeśli używasz LESS lub SASS, otwórz plik font-awesome.less / sass i edytuj zmienną ścieżki, @fa-font-path: "../font";która wskazuje na rzeczywiste czcionki:

@fa-font-path: "../font";

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

To samo dotyczy CSS, tyle że edytujesz ścieżkę w bloku deklaracji @ font-face:

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

jonschlinkert
źródło

Czy istnieje sposób na zaimportowanie tylko niektórych ikon zamiast wszystkich? Chciałbym tylko skompilować mój plik css do kilku ikon.

user805981

@fa-font-path: "../fonts";pracował dla mnie. (Zauważ, że sdodano brakujące )

prograhammer

Otwórz swój kod czcionki-awesome.css, 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 najprostszy sposób:

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

Erga Kandly
źródło

Próbowałem rozwiązać ten sam problem za pomocą kilku wcześniejszych rozwiązań, ale one nie działały w mojej sytuacji. Na koniec dodałem te 2 wiersze w HEAD i zadziałało:

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css">

Vojkan Cvijanovic
źródło

używam Font Awesome 4.3.0tylko linkowania z prac maxcdn, jak wspomniano tutaj ,

ale hostowanie na twoim serwerze umieszczanie czcionek i css w tym samym folderze działało dla mnie, jak to

wprowadź opis zdjęcia tutaj

następnie po prostu połącz css:

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

nadzieja pomaga komuś.

Shaijut
źródło

Musisz mieć 2 klasy, klasę fa i klasę fa, może to zadziała:

// Wrong
<i class="fas fa-search"></i>    

// Correct
<i class="fa fa-search"></i>

Izrael
źródło

Nie zdawałem sobie z tego sprawy - od wersji 5 wymagają teraz klasy fablub faszamiast faklasy.

Echilon,

Miałem ten problem. Problem polegał na tym, że miałem styl CSS rodziny czcionek z! Ważnym nadpisaniem czcionki fontawesome.

Jonny White
źródło

Miałem ten sam problem z * {font-family: Helvetica, sans-serif! Ważne; }

Dubbo,

Jeśli pracujesz z Maven i Apache Wicket, sprawdź również następujące elementy, aby spróbować rozwiązać problem z czcionkami Awesome i nie ładowanymi ikonami:

Jeśli umieściłeś swoje pliki na przykład w następującej strukturze plików

/src
 /main
  /java
   /your
    /package
     /css
      font-awesome.css
     /font
      fontawesome-webfont.eot
      fontawesome-webfont.svg
      fontawesome-webfont.svgz
      fontawesome-webfont.ttf
      fontawesome-webfont.woff

Kwestia 1) Czy poprawnie używasz pakietu Resource Guard, aby umożliwić prawidłowe ładowanie plików czcionek?

Przykład z twojej klasy, która rozszerza WebApplication:

@Override
public void init() {
    super.init();   
    get().getResourceSettings().setPackageResourceGuard(new PackageResourceGuard());

}

Kwestia 2) Po upewnieniu się, że wszystkie czcionki zostały poprawnie przesłane do przeglądarki internetowej, sprawdź, co faktycznie zostało przesłane do przeglądarki internetowej, tj. Czy zmieniła się integralność plików czcionek? Porównaj pliki w katalogu źródłowym i pliki przesłane do przeglądarki internetowej za pomocą np. Paska narzędzi Web Developer Toolbar dla przeglądarki Firefox i DiffDog (do porównania plików).

W szczególności, jeśli korzystasz z Maven, pamiętaj o filtrowaniu zasobów. Nie filtruj folderu, w którym znajdują się pliki / font - w przeciwnym razie zostaną uszkodzone.

Przykład z twojego pom.xml

<build>
    <finalName>Your project</finalName>
    <resources>
        <resource>
            <filtering>true</filtering>
            <directory>src/main/resources</directory>
        </resource>
        <resource>
            <filtering>false</filtering>
            <directory>src/main/java</directory>
            <includes>
                <include>**</include>
            </includes>
            <excludes>
                <exclude>**/*.java</exclude>
            </excludes>
        </resource>
    </resources>
</build>

W powyższym przykładzie nie filtrujemy folderu src / main / java, w którym znajdują się pliki css i czcionki.

Więcej informacji na temat filtrowania danych binarnych znajduje się w dokumentacji:

http://maven.apache.org/plugins/maven-resources-plugin/examples/filter.html

W szczególności dokumentacja ostrzega: „ Ostrzeżenie: Nie filtruj plików zawierających treści binarne, takie jak obrazy! Najprawdopodobniej spowoduje to uszkodzenie danych wyjściowych. Jeśli masz zarówno pliki tekstowe, jak i pliki binarne jako zasoby, musisz zadeklarować dwa wzajemnie wykluczające się zestawy zasobów. Pierwszy zestaw zasobów definiuje pliki do filtrowania, a drugi zestaw zasobów definiuje pliki do skopiowania bez zmian ... ”

Philipp
źródło

Miałem ten problem i ostrożnie przechodziłem przez każdy krok ... mimo że używam FA od wieków ... i wtedy zdałem sobie sprawę, że mam ten wiersz w pliku css poczty:

* {
font-family: Arial !important;
}

Głupia pomyłka, ale może to kogoś podpowiedzieć w przyszłości!

J Doe
źródło

To powinno być znacznie prostsze w nowej wersji 3.0. Najłatwiej jest wskazać CDN Bootstrap: http://www.bootstrapcdn.com/?v=01042013155511#tab_fontawesome

Czcionka Awesome
źródło

Musisz zwrócić nagłówek Access-Control-Allow-Origin do * dla plików czcionek

tronic
źródło

Dokładnie! Korzystanie z zewnętrznych dostawców do obsługi czcionek niesamowite pliki nie rozwiązuje problemu, po prostu przekazujesz go innym do rozwiązania.

Simanas

W grudniu 2018 roku łatwiej mi używać stabilnej wersji 4.7.0 hostowanej na bootstrapcdn zamiast niesamowitej czcionki 5.xx cdn na ich stronie internetowej - ponieważ przy każdej aktualizacji mniejszych wersji poprzednia wersja się psuje.

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

Ikony są takie same:

<i class="fa fa-facebook"></i>

ehacinom
źródło

Jeśli Twoim serwerem jest IIS, pamiętaj, aby dodać poprawny MIME, aby obsługiwał rozszerzenie pliku .woff. Prawidłowy MIME toapplication/octet-stream

Dario Brignone
źródło

Jeśli używasz IIS 7, możesz wykonać procedurę tutaj: technet.microsoft.com/en-us/library/cc725608(v=ws.10).aspx

dresh

font-weight: 900;

Miałem inny problem z czcionką Awesome 5. Domyślna grubość czcionki powinna wynosić 900 dla ikon FontAwesome, ale nadpisałem ją do 400 dla znaczników span i i. Po prostu zadziałało, kiedy to poprawiłem.

Oto odniesienie do problemu na stronie Github, https://github.com/FortAwesome/Font-Awesome/issues/11946

Mam nadzieję, że to komuś pomoże.

manian
źródło

dziękuję, to był również mój problem. Ustawiłem rodzinę czcionek na „Font Awesome 5 Free”, ale potrzebowałem też ciężaru czcionki na 900!

Hans Vonn,

Jeśli używasz wersji 5. * lub nowszej, musisz użyć

all.css lub all.min.css

Dołączenie fontawesome.css nie działa, ponieważ nie ma odniesienia do folderu webfonts i nie ma odniesienia do @ font-face lub font-family

Możesz to sprawdzić, wyszukując w kodzie właściwość font-family w fontawesome.css lub fontawesome.min.css

the_haystacker
źródło

ten był dla mnie idealnym rozwiązaniem - szkoda, że odpowiedź jest tak daleko poniżej, nie widziałem go i musiałem sam go wymyślić

Cold_Class

Możliwe, że ścieżka czcionki jest nieprawidłowa, więc css nie będzie w stanie załadować czcionki i wyrenderować ikon, więc musisz podać ścieżkę połączonych czcionek.

@font-face { 
font-family: "FontAwesome";
src: url("fonts/fontawesome-webfont.eot");
}

SantoshK
źródło

Użyj tego <i class="fa fa-camera-retro" ></i>, jeśli nie zdefiniowałeś klas fa

jitendra varshney
źródło

Począwszy od wersji 5, jeśli pakiet został pobrany z tej witryny:

https://fontawesome.com/download

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

Oto, jak wyglądałaby twoja referencja przy użyciu najnowszej wersji (zamień na folder):

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

żywa miłość
źródło

Po tym, jak walczyłem o znalezienie rozwiązania i NIE znalazłem oficjalnej dokumentacji pomocnej, to rozwiązało problem:

Pobierz Fontawesome.zip. Używam wersji 5.10.2 i mam ją tutaj https://fontawesome.com/download
Wewnątrz pliku zip znajduje się kilka folderów. Potrzebujesz tylko folderów css i webfonts
1. Utwórz 2 foldery w swoich projektach internetowych i nazwij je css i webfonts.

Te nazwy są obowiązkowe. Teraz skopiuj zawartość css i stron WWW z paczki do odpowiednich folderów w swoim projekcie. I to wszystko!

Strzeż się fontawesome! Awesomeness to proste dla użytkownika!

BabaNew
źródło

Zmieniłem z 3.2.1 na 4.0.1, a folder był czcionką i teraz nazywa się czcionkami.

src: url ('../ font / fontawesome-webfont.eot? v = 3.2.1');

src: url ('../ fonts / fontawesome-webfont.eot? v = 4.0.1');

Mam nadzieję, że to komuś pomoże.

André Duarte
źródło

Używam oficjalnej czcionki Awesome SASS Ruby Gem i naprawiłem błąd, dodając poniższy wiersz do mojej application.css.scss

@import "font-awesome-sprockets";

Wyjaśnienie:

Plik font-awesome-sprockets zawiera funkcje assest pomocnika Sassa służące do znalezienia właściwej ścieżki do pliku czcionek.

Marklar
źródło

jeśli używasz sassa i zaimportowałeś do pliku main.scss @import '../vendor/font-awesome/scss/font-awesome.scss';

Błąd może pochodzić z pliku font-awesome.scss, który szuka plików czcionek we względnej ścieżce.

Pamiętaj więc o zastąpieniu zmiennej $ fa-font-path: $fa-font-path: "https://netdna.bootstrapcdn.com/font-awesome/4.3.0/fonts" !default;

w ten sposób nie ma potrzeby dodawania cdn do index.html

Vilsbole
źródło

Sprawdź dokładnie plik fontawesome-all.css - na samym dole będzie ścieżka do folderu webfonts. Mój miał format „../webfonts”, co oznaczało, że plik css będzie wyglądał o 1 poziom wyżej. Ponieważ wszystkie moje pliki css były w folderze css i dodałem czcionki do tego samego folderu, to nie działało.

Po prostu przenieś folder czcionek na wyższy poziom i wszystko powinno być dobrze :)

Testowane przy pomocy Font Awesome 5.0

Ross
źródło

To powinna być preferowana odpowiedź, ponieważ odpowiada ona bezpośrednio na pytanie, bez odwoływania się do przestarzałej dokumentacji. Kudos

Kyle Champion,

Miałem ten sam problem z czcionki Awesome 5 pobranego z przędzy, zrobiłem dodany plik min.css WRAZ z plikiem all.js.

Mam nadzieję, że to komuś pomoże

<link  rel="stylesheet"   href="node_modules/@fortawesome/fontawesome-free/css/fontawesome.min.css">
<script src="node_modules/@fortawesome/fontawesome-free/js/all.js" charset="utf-8"></script>

Enrique Martinez
źródło

Plik /css/all.css zawiera stylizację rdzenia oraz wszystkie style ikon, których będziesz potrzebować podczas korzystania z Font Awesome. Folder / webfonts zawiera wszystkie pliki krojów czcionek, do których odwołuje się powyższy CSS i od których zależy.

Skopiuj cały folder / webfonts i /css/all.css do katalogu zasobów statycznych swojego projektu (lub tam, gdzie wolisz przechowywać zasoby frontonu lub rzeczy dostawców).

Dodaj odniesienie do skopiowanego pliku /css/all.css do każdego szablonu lub strony, na której chcesz użyć Font Awesome.

Wystarczy odwiedzić - https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself Otrzymasz odpowiedź.

Dipesh Chauhan
źródło

Użycie ścieżek bezwzględnych zamiast względnych rozwiązało to dla mnie. Używałem ścieżek względnych (patrz pierwszy przykład poniżej) i to nie działało. Sprawdziłem za pomocą konsoli i okazało się, że serwer zwraca 404, nie znaleziono plików.

Ścieżka względna spowodowała 404:

@font-face { 
font-family: "FontAwesome";
src: url("../fonts/fontawesome-webfont.eot?v=4.0.3");
}

Ścieżka bezwzględna rozwiązała to w różnych przeglądarkach:

@font-face { 
font-family: "FontAwesome";
src: url("http://www.mysite.com/fonts/fontawesome-webfont.eot?v=4.0.3");
}

Nie poleciłbym tego robić, chyba że musisz, ale to działa dla mnie. Oczywiście powinieneś to powtórzyć dla wszystkich formatów czcionek w pliku font-awesome.css.

Tim
źródło

Nie działało to dla mnie, ponieważ miałem Allow from nonedyrektywę dla katalogu głównego w mojej konfiguracji apache. Oto jak mam to uruchomić ...

Moja struktura katalogów:

root/
root/font-awesome/4.4.0/css/font-awesome.min.css
root/font-awesome/4.4.0/fonts/fontawesome-webfont.*
root/dir1/index.html

gdzie mój index.html ma:

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

Zdecydowałem się nadal blokować dostęp do mojego katalogu głównego i zamiast tego dodałem kolejny wpis katalogu w mojej konfiguracji apache dla root / font-awesome /

<Directory "/path/root/font-awesome/">
    Allow from all
</Directory>

użytkownik3325776
źródło