WordPress में Font Awesome Icons Empty Square (□) Fix कैसे करें?

दोस्तों, अपने WordPress Blog को Design करने के लिए हमने Font Awesome की तरफ से आने वाले Icons का तो इस्तेमाल जरूर करते हैं क्योंकि इससे हमारी WordPress Website का Design थोड़ा बेहतर लगता है।

लेकिन अब कुछ समय से आप में से काफी लोगों को Font Awesome में एक Error आ रहा होगा जो कि आता है Empty Squares का यानी छोटे-छोटे Boxes दिखाई देते हैं। अब इन Icons की जगह Boxes दिखाई देना यानी हमारा Website Design खराब होना।

अगर ऐसे Empty Square Boxes दिखेंगे तो हमारा SEO Ranking भी Down हो सकता है। तो इसे Fix करने के लिए चलिए आज मैं आपको कुछ Steps बताऊंगा जिनके जरिए आपका इस Font Awesome Empty Square Boxes Issue का Issue पूरी तरीके से 2026 में Fix हो जाएगा।

Font Awesome Empty Square Boxes Problem क्या है?

दोस्तों जब हम Font Awesome को हमारे WordPress Blog के लिए इस्तेमाल करते हैं तो यहाँ हमें एक Variety of Icons Library मिलती है जिसमें Text Fonts होते हैं, जिसमें Text Fonts की जगह हमें Icons मिलते हैं।

अब जब भी कोई Reader हमारी Blog को Read करने आता है तो उसे हमारी Website पर Icons दिखाई देते हैं।

अब समझते हैं कि ये Empty Square Boxes Problem क्या है। तो देखिए, हम हमारे Blog पर जो Font Awesome की तरफ से आने वाले Icons को इस्तेमाल करते हैं, तो Icons की जगह Empty Square Boxes दिखाई देते हैं जिसमें हमारे Icons Web Browser में सही से Render नहीं हो पाते।

तो अब इन्हें Fix किया जा सकता है और यह Problems आती तब हैं जब हमारे Font Awesome CSS properly Load नहीं होता या हम Font Awesome का एक गलत Version इस्तेमाल करते हैं या फिर सबसे Common Issue होता है हमारी Font Files का जो Main Path होता है वह पूरी तरीके से Delete हो जाता है या Broken हो जाता है।

तो चलिए इसे कैसे Fix किया जाए उसके बारे में भी थोड़ा समझते हैं।

Font Awesome Icons Empty Square Boxes (□) Fix कैसे करें?

तो दोस्तों यह Issue करने के लिए हमें 5 Steps को Follow करना होगा और इस Issue का Core Problem भी समझना होगा।

Step 1: Identify Problem

जैसे मैंने आपको बताया सबसे पहले हमें यह समझना पड़ेगा कि Font Awesome की तरफ से यह Empty Square Boxes क्यों दिख रहे हैं। तो इसके लिए आप अपने Chrome Browser में जाएं और F12 Button दबाकर Console Tab देखें।

Failed to load resource: net::ERR_NOT_FOUND
https://yoursite.com/wp-content/themes/yourtheme/fonts/fontawesome-webfont.woff2

वहाँ अगर आपको कुछ इस तरह का Error दिखाई देता है तो समझ जाइए कि आपके Font Awesome Font Files Broken हैं।

Access to font at 'https://...' has been blocked by CORS policy

और अगर ऐसा दिखे तो समझ जाइए कि CORS Restrictions की वजह से Fonts Load नहीं हो रहे थे।

Step 2: Font Awesome CDN

तो क्योंकि हमारा जो Font Awesome है उसकी सारी जो Files होती हैं वो Hosting पर Missing हो सकती हैं या तो उनका File Path Delete हो सकता है। इस वजह से CDN इस्तेमाल करना सबसे Fast और Best Solution है।

इसके लिए आप अपने Theme Functions.php को Open करें और वहाँ पर नीचे दिए गए Code को Paste कर दीजिए

function add_font_awesome() {
    wp_enqueue_style(
        'font-awesome',
        'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css',
        array(),
        '6.5.0'
    );
}
add_action('wp_enqueue_scripts', 'add_font_awesome');

या फिर आप अपने Theme Header.php में Head Tag के पहले नीचे दिए गए HTML Code को भी Copy करके Paste कर दीजिए

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

फिर Save के Button पर Click कीजिए।

Step 3: Font Awesome Version

क्योंकि Font Awesome के बहुत सारे Versions Available हैं जिसमें Font Awesome 4 और Font Awesome 5 सबसे Popular हैं। तो यदि आप Previous Version को इस्तेमाल कर रहे हैं तो हो सकता है वहाँ पर यह Problem आ रही हो।

तो इसके लिए आप अपने Font Awesome 4 Syntax को कुछ इस तरीके से रखिए

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

यदि आप Font Awesome 5 या दूसरा Version Use कर रहे हैं तो उसके लिए आप ऐसा रखिए।

<i class="fas fa-home"></i>   <!-- Solid icons -->
<i class="far fa-home"></i>   <!-- Regular icons -->
<i class="fab fa-github"></i> <!-- Brand icons -->

और हाँ Font Awesome 5 और इसके बाद के सभी Versions के लिए हमें Shim File, V4 Classes को Automatically नए Classes में Convert करने के लिए नीचे दिए गए HTML Code को लीजिए

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/v4-shims.min.css">

और Font Awesome CSS के साथ Attach कर दीजिए जिससे हमें manually यह चीज़ें करनी नहीं पड़ेंगी।

Step 4: CORS Issue Fix

जैसे मैंने आपको बताया कि Font Awesome Files हमारे Hosting Server पर Host होती हैं जिसके वजह से CDN उसे Use नहीं कर पाता तो CORS Error आ जाता है।

इसके लिए हमें सबसे पहले हमारे Server के .htaccess File में नीचे दिए गए Code को Paste करना होगा।

<IfModule mod_headers.c>
    <FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css|css)$">
        Header set Access-Control-Allow-Origin "*"
    </FilesMatch>
</IfModule>

अब यह Code Paste करने के बाद हमारे Browser में Website में जितने भी जगह Font Awesome Empty Squares आ रहे थे वह Fix हो जाएंगे।

Step 5: Font Awesome Plugin

अब सबसे बेहतर, जो मुझे manually Code Edit करना नहीं आता, तो सबसे बेहतर जो मुझे यह Error को Fix करने का Solution दिखता है वह Font Awesome की तरफ से आने वाला Official Plugin है।

इसके लिए हमें Better Font Awesome नाम का Plugin Install करना होगा। और इस Plugin Settings में जाकर Latest Version को Select कर लीजिए।

उसके बाद जो पुराने हमारे Existing Font Awesome हैं उसको भी Remove कर दीजिए। यह भी आप वहाँ एक Enable Option पर Click करके कर सकते हैं।

इतना करने के बाद आप अपने WordPress Cache को Clear कर लीजिए और Website को एक बार Reload करने के बाद आपका यह Issue पूरी तरीके से Fix हो जाएगा।

Read this Also: Internal Link Audit क्या है?

Conclusion

दोस्तों ऊपर मैंने आपको 5 Steps बताए हैं जिनको Follow करके आप अपने Font Awesome Empty Square Boxes को अपने WordPress Blog से पूरी तरह Fix कर सकते हैं।

इसमें सबसे Effective तरीका Font Awesome WordPress Plugin है जिसको आप ज़रूर इस्तेमाल कीजिए। और यदि आपको फिर भी यह Error आता है तो आप Font Awesome Contact Team से बात करके इस Problem का Solution मांग सकते हैं।