Icons werden auf einmal nicht mehr korrekt angezeigt

**Michi Löffler** · 06.10.2016, 23:10

Hallo zusammen

Ich weiss nicht genau seit wann, aber die Icons auf meiner Website werden auf einmal nicht mehr korrekt angezeigt.
Hat jemand eine Idee woran dies liegen kann ?

http://www.loeffler-web.ch

Oben Links habe ich die Social Icons und in der Mitte der Homepage auch solche die dynamisch eingeblendet werden oder in der Fusszeile beim Mail und Telefonnummer.

Besten Dank und Grüsse
Michi

**tab** · 06.10.2016, 23:24

So wie es aussieht, werden einfach die Fontdateien von Font Awesome nicht gefunden (.woff, .ttf)

**Michi Löffler** · 07.10.2016, 00:12

Danke tab..... Unterdessen sieht es so aus das es im IE angezeigt wird, im Firefox, Chrome und Edge aber nicht. Warum weiss ich auch nicht, habe Script und Cache alles mal geleert.... Keine Ahnung woran es liegt.

Danke trotzdem...

**Spooky** · 07.10.2016, 06:33

Die Developer Konsole würde dir sagen, dass folgende Dateien nicht gefunden werden:

Der Fehler liegt aber am CSS, denn hier steht folgendes:

Code:

@font-face {
  font-family: 'FontAwesome';
  src: url("http://www.loeffler-web.ch/files/loeffler_web/iconfont/fonts/fontawesome-webfont.eot?v=4.0.3");
  src: url("http://www.loeffler-web.ch/files/loeffler_web/iconfont/fonts/fontawesome-webfont.eot?#iefix&v=4.0.3") format('embedded-opentype'), url("http://www.loeffler-web.ch/loeffler/files/theme/iconfont/fonts/fontawesome-webfont.woff?v=4.0.3") format('woff'), 
  url("http://www.loeffler-web.ch/loeffler/files/loeffler_web/iconfont/fonts/fontawesome-webfont.ttf?v=4.0.3") format('truetype'), 
  url("http://www.loeffler-web.ch/loeffler/files/loeffler_web/iconfont/fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular") format('svg');
  font-weight: normal;
  font-style: normal;
}

Die URLs für die die TTF, SVG und WOFF Dateien sind wohl falsch.

**Michi Löffler** · 07.10.2016, 06:57

Oh super, vielen Dank, habs gefunden und angepasst und nun sieht es super aus.

Wie und welche Developerkonsole meinst Du genau ? Die von IE mittels F12 oder Firebug von Firefox ? Oder intern in Contao ?

**Spooky** · 07.10.2016, 08:09

Zitat von Michi Löffler

Oh super, vielen Dank, habs gefunden und angepasst und nun sieht es super aus.

Wie und welche Developerkonsole meinst Du genau ? Die von IE mittels F12 oder Firebug von Firefox ? Oder intern in Contao ?

Die von den Browsern mit F12, ja.

**Michi Löffler** · 06.05.2019, 22:59

Hallo zusammen
Ich muss hier leider nochmals auf diesen alten Beitrag zurückgreifen, denn ich habe auf Contao Version 3.5.40 migriert und seither (oder auch schon zuvor, weiss ich leider nicht mehr genau), werden die Fonts wieder nicht mehr angezeigt. In der Konsole finde ich auch keinen Fehler..... Sieht jemand von euch was, woran dies liegen könnte ?

Habe auch gerade gesehen, dass auf keiner Unterseite das Font noch angezeigt wird :-(

Vielen Dank und Grüsse
Michi

**fiedsch** · 07.05.2019, 05:39

Siehe #4 (zumindest für woff):

Code:

@font-face {
  font-family: 'FontAwesome';
  src: url(http://www.loeffler-web.ch/files/theme/iconfont/fonts/fontawesome-webfont.eot?v=4.0.3');
  src: url(http://www.loeffler-web.ch/files/theme/iconfont/fonts/fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'), url(http://www.loeffler-web.ch/loeffler/files/theme/iconfont/fonts/fontawesome-webfont.woff?v=4.0.3') format('woff'), url(http://www.loeffler-web.ch/files/theme/iconfont/fonts/fontawesome-webfont.ttf?v=4.0.3') format('truetype'), url(http://www.loeffler-web.ch/files/theme/iconfont/fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

**Michi Löffler** · 07.05.2019, 08:14

Vielen Dank, habe es angepasst aber leider hat es keine Wirkung gezeigt. Die Icon sind immer noch nicht angezeigt ??

**Michi Löffler** · 07.05.2019, 11:34

Habe es mit Hilfe der folgenden URL im Seitenlayout im "Head" Bereich hinbekommen, das die Icons wieder angezeigt werden.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Es verweist nun halt nicht mehr an mein eigenes Verzeichnis, dafür an die offizielle Stelle der Awesome Fonts. Hoffe, dass klappt so auch :-)