FontAwesome से फ़ॉलबैक अगर फ़ॉन्ट डाउनलोड अवरुद्ध

Question

मैं एक वेब पेज विकसित कर रहा हूं और FontAwesome को चीजों पर अच्छे आइकन जोड़ने के लिए एक सुंदर साफ तरीके के रूप में पाया गया है, हालांकि डिफ़ॉल्ट फ़ॉन्ट डाउनलोड फ़ायरफ़ॉक्स के लिए NoScript plugin द्वारा अवरुद्ध किए गए हैं।

यह सामान्य फोंट के लिए कोई मुद्दा नहीं होगा, लेकिन FontAwesome यूनिकोड वर्णों का उपयोग करता है जो जानबूझकर अधिकांश फ़ॉन्ट्स की सामान्य प्रिंट करने योग्य रेंज के बाहर हैं, इसलिए सीएसएस (ईजी: font-family: FontAwesome, sans-serif;) में एक फ़ॉन्ट स्टैक जोड़ना सभी के रूप में काम नहीं करेगा आइकन सिर्फ हेक्स-वर्ग के रूप में प्रस्तुत करते हैं।

मुझे पता है मैं NoScript ठीक कर सकते हैं फॉन्ट डाउनलोड की अनुमति है, लेकिन यह सभी उपयोगकर्ताओं के लिए आदर्श समाधान नहीं है - मैं नहीं बल्कि पेज शान से नीचा होगा।

बेशक

, यह जावास्क्रिप्ट/jQuery के साथ ऐसा करने के लिए आसान हो सकता है, लेकिन निश्चित रूप से अगर यह NoScript कि अवरुद्ध कि कोई मदद नहीं या तो है कर रहा है, और उपयोगकर्ता जावास्क्रिप्ट सक्षम नहीं है, तो यह परीक्षण में विफल रहता है ।

क्या आदर्श होगा कुछ सीएसएस शैली/नियम यह है कि किसी भी FontAwesome वस्तुओं के लिए वापस आने के रूप में कार्य करता है, उन्हें कुछ बुनियादी चरित्र या यहाँ तक कि कुछ भी दिखाई नहीं दे रहा जगह है करने के लिए किया जाएगा।

FontAwesome/टी एल के साथ अपरिचित उन लोगों के लिए, डॉ:

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

FontAwesome इस तरह कस्टम फ़ॉन्ट (मैं हटा दिया

@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"); 
} 

लोड करता है:

सभी FontAwesome माउस सीएसएस वर्ग "पिता" है

और फिर एक विशेष FontAwesome आइकन अपनी विशिष्ट वर्ग है कि प्रासंगिक यूनिकोड चरित्र सम्मिलित करता है, उदाहरण के लिए होगा:

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

आइकन के लिए HTML इस तरह दिखेगा:

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

तो समस्या यहाँ है: हम किसी तरह की जरूरत है, खासकर सीएसएस में,, की जगह को हटाने, या सामग्री को छिपाने के लिए सीएसएस क्लास "एफए" के साथ आइटमों का प्रकार अगर टाइपफेस "FontAwesome" लोड नहीं होता है।

Answer 1

ठीक है, मुझे लगता है कि मैं सही दिशा में अग्रणी तुम लोगों को यह धन्यवाद हल:

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

यह प्रत्येक पिता-आइकन वर्ग का चयन करता है:

सिर में, मैं इस डाल आइटम, जो सभी पैटर्न में परिभाषित हैं:

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

और एक सामान्य चरित्र के साथ सामग्री को प्रतिस्थापित करता है, या वास्तव में हम किसी और चीज की देखभाल कर सकते हैं सम्मिलित करने के लिए (कुछ भी शामिल नहीं है)।

क्या यह उचित लगता है या क्या यहां कुछ भयानक साइड-इफेक्ट है जो मैंने याद किया है?

मुझे पता है वहाँ एक सुदूर संभावना किसी फॉन्ट लोडिंग अवरुद्ध लेकिन जावास्क्रिप्ट सक्षम है कि है, लेकिन अब के लिए मुझे लगता है कि ग्राहक जनसांख्यिकीय अनदेखी करने के लिए खुश हूँ;)

संपादित करें जोड़ने के लिए:

FontAwesome Fixed

: यह सब समय के बाद इस जवाब अभी भी विभिन्न तरीकों से में (धन्यवाद!) वोट मिल रहा है, स्पष्ट रूप से यह अभी भी एक मुद्दा है, इसलिए मैंने सोचा कि मैं बहुत सुधार (और काट-छाँट) के बारे में इस लिंक पोस्ट चाहते हैं FontAwesome मेरा पसंदीदा एक है चुनिंदा आइकनों को इनलाइन बेस 64 कोडित एसवीजी के रूप में, या तो HTML या आपके सीएसएस में एम्बेड करना। यह बहुत सुरुचिपूर्ण और कुशल लगता है, खासकर यदि आपको केवल सेट के कुछ आइकन चाहिए। एफए अभी भी मुझे झुकाव की तरह लगता है।

Answer 2

इसके आसपास काम करने का एक तरीका <noscript> उपयोगकर्ताओं के लिए एक और सीएसएस फ़ाइल खींचना होगा, और छवियों या sprites के लिए .fa-* कक्षाओं को ओवरराइड करना होगा।

उदाहरण के लिए:

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

आपका safe-icons.css फ़ाइल कुछ इस तरह दिख सकता है:

.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'); } 

बेशक

, आप माउस के साथ काम कर के मुद्दे होगा FontAwesome से हासिल कर लिया है कि अलग है आकार, लेकिन यह निश्चित रूप से संतुलन पर हमला करेगा, और कम से कम कुछ उपयोगकर्ताओं को नोस्क्रिप्ट सक्षम करने के लिए प्रस्तुत करेगा।

Answer 3

मैंने हाल ही में समस्याओं में भाग लिया जहां जेएस सक्षम है, लेकिन उपयोगकर्ता एक सुरक्षित नेटवर्क पर हैं जो सभी वेब फोंट या एफए को विशेष रूप से अवरुद्ध करता है।

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); 
}; 

मूल रूप से, यह है कि पेज और चेक पर एक एफए तत्व बनाता है देखने के लिए अगर फॉन्ट सही ढंग से लोड किया गया था jQuery का एक सा है:

इसे ठीक करने के लिए, मैं इसी तरह की to this कुछ हुआ करता था। यदि नहीं, तो आप फॉलबैक लागू कर सकते हैं। मेरे मामले में, फ़ॉलबैक एक सामान्य प्लेसहोल्डर ग्राफिक के साथ <img> टैग डालना था।

यह शुद्ध सीएसएस नहीं है, लेकिन यह (1) और अधिक शक्तिशाली वापस आने उपायों के लिए अनुमति देता है, और (2) बस <noscript>