it-swarm.com.de

Font Fantastische Symbole, die in OSX Safari nicht funktionieren

Meine font-awesome Symbole funktionieren in Firefox und Chrome einwandfrei, aber in Safari sehe ich nur Leerzeichen für einige von ihnen, aber nicht für andere. Bildschirmfoto:

http://imgur.com/8MaOH1I.png

Wie Sie sehen, werden die Symbole für fa-Twitter, fa-instagram und andere nur nicht angezeigt, weder auf der Website von Font Awesome noch, wenn ich versuche, sie mit <i class="fa fa-instagram"></i> zu verwenden.

Wirklich bizarr, ich habe meinen Cache ein Dutzend Mal geleert und kann nicht herausfinden, was hier sonst noch schief gehen könnte.

Irgendwelche Ideen?

8
JVG

Möglicherweise liegt ein anderes Problem vor - ich hatte ein ähnliches Problem, bei dem ein benutzerdefiniertes Symbolset (mit der Option "Benutzerdefinierte Schriftart") in Chrome, Firefox und einigen Versionen von Safari angezeigt wurde, jedoch keine Versionen von iOS. Ich habe sichergestellt, dass keine Popup-Blocker aktiviert sind, aber das Problem ist weiterhin aufgetreten.

Durch ein wenig Recherche stellte ich fest, dass das Hinzufügen dieser Eigenschaft zum CSS der Symbolschriftart das Problem behebt:

text-rendering: optimizeLegibility;

Nachdem diese Eigenschaft hinzugefügt wurde, funktionierte das Rendern in allen Browsern einwandfrei.

11
karolus

Haben Sie ein Werbeblocker-Plugin in Safari installiert?
Laut der Dokumentation von Font Awesome können mit einem solchen Plugin Icons von sozialen Netzwerken gesperrt werden.

9
transistor

Versuche dies. Für mich geht das.

@font-face {font-family: 'FontAwesome'; src: url('../fonts/fontawesome-webfont.eot?v=4.4.0'); src: url('../fonts/fontawesome-webfont.eot #iefix&v=4.4.0') format('embedded-opentype'), url('../fonts/fontawesome webfont.woff2?v=4.4.0') format('woff2'), url('../fonts/fontawesome webfont.woff?v=4.4.0') format('woff'), url('../fonts/fontawesome webfont.ttf?v=4.4.0') format('truetype'), url('../fonts/fontawesome webfont.svg?v=4.4.0#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal;}
1
Shankar M

Verwenden Sie die neueste Version von Chrome? Sie haben jetzt eine angepasste Version des Webkits, einen Zweig namens Blink. Obwohl sie in Chrome angezeigt werden, müssen Sie möglicherweise einen anderen Webkit-Browser einchecken, um sicherzugehen.

Auch was der gefürchtete IE? Zeigen sie dort?

Normalerweise muss ich Safari zurücksetzen, anstatt nur den Cache zu leeren, um den Cache tatsächlich zu löschen!

1
kelly johnson

In meinem Fall hatte ich die falsche Schriftfamilie für Markensymbole.

Mein altes CSS:

font-family: "FontAwesome";

Mein neues (funktionierendes) CSS:

font-family: "Font Awesome 5 Brands";
font-weight: 900;

Dies sollte jedem helfen, der alten Code verwendet und Probleme mit der Anzeige von Markensymbolen (Twitter, Facebook usw.) hat.

0
E Allison

Versuchen Sie, Ihren Cache zu leeren. Dies ist mir schon einmal passiert und wurde behoben, nachdem ich meinen Cache geleert habe (obwohl ich Chrome verwendet habe).

0
John

Dies geschah auf unserer Website sogar mit dem Nicht-Markensymbol FontAwesome fa-share-square-o,\f045. Es wurde von einem Werbeblocker verursacht. Sobald unsere Website auf die Whitelist gesetzt wurde, erschien das Symbol.

0
HamletHub

Es war definitiv der Adblocker, als ich ihn auf einer Site deaktivierte, bei dem ich ein Problem damit hatte, das es reparierte

0
Brian Hertneky

Es scheint, dass Safari unsignierte Schriftarten blockiert. Die Verwendung von CDN mit Integrität behebt das Problem:

Für Font Awesome habe ich folgenden Link verwendet, den ich gefunden habe: https://fontawesome.com/how-to-use/on-the-web/setup/getting-started?using=web-fonts-with-css

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
0
Farshad Javadi