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
1
Czy importujesz czcionkę?
— mayhewr
1
Prawdopodobnie nie. Myślałem, że musisz tylko dołączyć .cssplik.
— Connor Black,
2
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
1
Nie można znaleźć kroku 3 w powyższym linku od sierpnia 2016 r ... Jakieś przekierowania?
— Saurabh Tiwari,
1
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
5
Ś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
1
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
1
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
7
@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
4
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
5
Uwaga: „Prefiks fa został wycofany w wersji 5. Nowe ustawienie domyślne to fas solid style i super style dla marek”.
— Terje Solem
1
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
1
@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
54

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
6
zakłada to, że chcesz użyć CDN z font-awesome. W przypadku komercyjnego środowiska produkcyjnego nie zrobiłbym tego.
— Jay Edwards,
48

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
11
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
1
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
2
Tak - ta wina była winna (ściślej mówiąc, ważna zasada!): * {Font-family: 'Source Sans Pro'! Ważne}
— Svet
1
Jest to najważniejsza i przydatna wskazówka dotycząca korzystania z Font Awesome, aby uniknąć utraty czasu na znalezienie problemu.
— Dez
22

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
18

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
13

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
12

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
8

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
3
Nie zdawałem sobie z tego sprawy - od wersji 5 wymagają teraz klasy fablub faszamiast faklasy.
— Echilon,
7

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,
6

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
6

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
4

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

— tronic
źródło
2
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
4

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
3

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
1
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,
3

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
2

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
2

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
2

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

  1. Pobierz Fontawesome.zip. Używam wersji 5.10.2 i mam ją tutaj https://fontawesome.com/download

  2. Wewnątrz pliku zip znajduje się kilka folderów. Potrzebujesz tylko folderów css i webfonts wprowadź opis zdjęcia tutaj

    1. Utwórz 2 foldery w swoich projektach internetowych i nazwij je css i webfonts. wprowadź opis zdjęcia tutaj

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
1

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
1

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
1

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
1

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,
1

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
1

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
0

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
0

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