Fallback von FontAwesome, wenn Font-Download gesperrt

Question

Ich entwickle eine Webseite und gefunden FontAwesome als eine ziemlich nette Möglichkeit, schöne Symbole zu Dingen hinzuzufügen, jedoch standardmäßig Schriftart Downloads werden von der NoScript plugin für Firefox blockiert. Dies ist kein Problem für normale Fonts, aber FontAwesome verwendet Unicode-Zeichen, die bewusst außerhalb des üblichen druckbaren Bereichs der meisten Fonts liegen. Daher wird das Hinzufügen eines Font-Stacks zum CSS (EG: font-family: FontAwesome, sans-serif;) nicht so funktionieren Symbole werden nur als Hex-Quadrate dargestellt.

Ich realisiere, dass ich NoScript optimieren kann, um Schriftdownloads zu erlauben, aber das ist nicht die ideale Lösung für alle Benutzer - ich würde die Seite lieber degradieren.

Natürlich wäre es einfach, dies zu tun mit Javascript/jQuery, aber natürlich, wenn es NoScript welche die blockierende tun, die keine Hilfe entweder ist, und es den Test nicht besteht, wenn der Benutzer nicht über Javascript aktiviert .

Was wäre ideal wäre, hätte einige CSS-Stil/Regel, die als Fallback für alle FontAwesome-Objekte fungiert, ersetzt sie durch einige grundlegende Zeichen oder auch nur nichts angezeigt.

Für diejenigen, die nicht mit FontAwesome/TL; DR:

Alle FontAwesome Symbole haben die CSS-Klasse "fa":

.fa { 
    display: inline-block; 
    font-family: FontAwesome; 
    font-style: normal; 
    font-weight: normal; 
    line-height: 1; 
} 

FontAwesome lädt die benutzerdefinierte Schriftart wie folgt aus (I entfernt

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

Und dann wird ein bestimmtes FontAwesome-Symbol eine eigene spezifische Klasse haben, die das entsprechende Unicode-Zeichen einfügt, zum Beispiel:

.fa-star:before { 
    content: ""; 
} 

Der HTML-Code für das Symbol wird wie folgt aussehen:

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

So ist das Problem hier: wir eine Möglichkeit brauchen, vorzugsweise in CSS, zu ersetzen, entfernen oder den Inhalt verstecken von Elementen mit der CSS-Klasse "fa", wenn die Schriftart "FontAwesome" NICHT geladen ist.

Answer 1

Nun, ich denke, ich löse dies dank ihr mich in der richtigen Richtung führen:

Im Kopf, habe ich dies:

<noscript> 
    <style> 
     [class*="fa-"]:before 
     { 
      content:"+"; 
     } 
    </style> 
</noscript> 

Dieser wählt jede fa-icon-Klasse Artikel, die alle in dem Muster definiert sind:

.fa-heart:before { 
    content: "\f004"; 
} 

und ersetzt den Inhalt mit einem generischen Charakter, oder in der Tat alles andere kümmern wir uns vielleicht einfügen (einschließlich nichts).

Scheint das vernünftig oder gibt es eine schreckliche Nebenwirkung, die ich hier verpasst habe?

ich erkennen, dass es eine entfernte Möglichkeit ist, dass jemand font-Laden blockiert hat aber Javascript aktiviert, aber jetzt bin ich glücklich, dass Kunden demografischen zu ignorieren;)

bearbeiten hinzuzufügen:

nach all dieser Zeit ist diese Antwort noch Stimmen bekommen (vielen dank!), eindeutig ein Problem, es ist nach wie vor, so dass ich dachte, dass ich auf diesen Link, um stark zu verbessern schreiben würde (und Trimmen) FontAwesome in einer Vielzahl von Möglichkeiten: FontAwesome Fixed

Mein Favorit ist ein Einbetten ausgewählter Symbole als inline Base64-kodiertes SVG, entweder im HTML oder in Ihrem CSS. Das scheint ziemlich elegant und effizient zu sein, besonders wenn Sie nur ein paar Icons aus dem Set brauchen. FA fühlt sich immer noch wie ein Tüftler für mich.

Answer 2

Eine Möglichkeit, um dies zu umgehen wäre, eine andere CSS-Datei für <noscript> Benutzer zu ziehen und überschreiben die .fa-* Klassen für Bilder oder Sprites.

Zum Beispiel:

<noscript> 
<link rel="stylesheet" type="text/css" href="safe-icons.css" /> 
</noscript> 

Ihre safe-icons.css Datei wie folgt aussehen könnte:

.fa { 
    display: inline-block; 
    overflow: hidden; 
    color: transparent; 
    font-family: sans-serif; 
    width: 16px; 
    height: 16px; 
    background-position: center center; 
    background-repeat: no-repeat; 
} 

.fa-star { background-image: url('star.png'); } 

Natürlich haben Sie das Problem mit Symbolen des Umgangs gezogen von FontAwesome, die unterschiedliche haben Größen, aber dies wird sicherlich ein Gleichgewicht finden und zumindest etwas für Benutzer mit NoScript ermöglichen.

Answer 3

Ich habe kürzlich Probleme bei denen JS aktiviert ist, aber Benutzer sind in einem gesicherten Netzwerk, das entweder alle Web-Schriftarten oder FA speziell blockiert.

es zu beheben, habe ich etwas ähnliches to this:

function css(element, property) { 
    return window.getComputedStyle(element, null).getPropertyValue(property); 
} 

window.onload = function() { 
    var span = document.createElement('span'); 

    span.className = 'fa'; 
    span.style.display = 'none'; 
    document.body.insertBefore(span, document.body.firstChild); 

    if ((css(span, 'font-family')) !== 'FontAwesome') { 
    // add a local fallback 
    } 
    document.body.removeChild(span); 
}; 

Im Grunde ist es ein bisschen jQuery, die ein FA-Element auf der Seite und Kontrollen erstellt, um zu sehen, ob die Schriftart korrekt geladen wurde. Wenn nicht, können Sie einen Fallback implementieren. In meinem Fall bestand der Fallback darin, einen -Tag mit einer generischen Platzhaltergrafik einzufügen.

Es ist nicht reine CSS, aber es (1) ermöglicht leistungsfähigere Ausweichmaßnahmen, und (2) umfasst mehr Szenarien als nur <noscript>