Cdnjs: Font Awesome لا يعمل في Firefox (تم العثور على إصلاح محتمل)

تم إنشاؤها على ١٠ يناير ٢٠١٣  ·  26تعليقات  ·  مصدر: cdnjs/cdnjs

مرحبًا ، عند استخدام Font Awesome ، وجدت أنه في Firefox لا يتم عرض الأحرف كما ينبغي بينما تعمل بشكل جيد في Chrome و Safari.

بعد بعض البحث حول هذا يبدو مشكلة شائعة ، وجدت هذا الاقتراح:

http://blog.netdna.com/opensource/font-awesome-firefox-bug-fix/

هل يمكنك إضافة المسارات المطلقة بدلاً من المسارات النسبية إلى ملف css؟

شكرا جزيلا

التعليق الأكثر فائدة

أجريت بعض الاختبارات ووجدت حلًا.

تُظهر وحدة تحكم تطوير FF هذا عند تحميل الخط awsome css:

[09:29:21.785] downloadable font: download failed (font-family: "FontAwesome" style:normal weight:normal stretch:normal src index:1): bad URI or cross-site access not allowed
source: http://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.0.0/font/fontawesome-webfont.woff @ http://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.0.0/css/font-awesome.min.css

يجب أن يعطي الخادم الترويسات المناسبة للسماح بالوصول (حصلت على هذا من: https://github.com/netdna/bootstrap-cdn/issues/27):

<FilesMatch ".(ttf|otf|woff)$">
    Header set Access-Control-Allow-Origin "*"
</FilesMatch>

هذا ينبغي حل المشكلة. إذا لم يحدث ذلك ، فيجب أيضًا تغيير عناوين URL لملفات الخطوط في CSS إلى نسبية

ال 26 كومينتر

لقد جربت هذا واختبرت من الملف الخام لفرعي ، لكن بطريقة ما لا يعمل. وجميع خطوطي تظهر الآن المربعات. هل جربت هذا؟

https://github.com/bfintal/cdnjs/blob/font-awesome-ff-patch/ajax/libs/font-awesome/3.0.0/css/font-awesome.min.css

ربما تؤدي إضافة هذا إلى خادم cdnjs أيضًا إلى جعله يعمل: http://www.wpthemehelp.com/knowledgebase/font-icons-not-working/

مرحبا جامي ،
شكرا للمعلومة. سننظر فيه :)

يوم الخميس ، 10 كانون الثاني (يناير) 2013 الساعة 10:22 مساءً ، Jami Intal [email protected]

ربما تؤدي إضافة هذا إلى خادم cdnjs أيضًا إلى جعله يعمل:
http://www.wpthemehelp.com/knowledgebase/font-icons-not-working/

-
قم بالرد على هذه الرسالة الإلكترونية مباشرة أو اعرضها على Gi tHubhttps: //github.com/cdnjs/cdnjs/issues/755#issuecomment -12092131.

أجريت بعض الاختبارات ووجدت حلًا.

تُظهر وحدة تحكم تطوير FF هذا عند تحميل الخط awsome css:

[09:29:21.785] downloadable font: download failed (font-family: "FontAwesome" style:normal weight:normal stretch:normal src index:1): bad URI or cross-site access not allowed
source: http://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.0.0/font/fontawesome-webfont.woff @ http://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.0.0/css/font-awesome.min.css

يجب أن يعطي الخادم الترويسات المناسبة للسماح بالوصول (حصلت على هذا من: https://github.com/netdna/bootstrap-cdn/issues/27):

<FilesMatch ".(ttf|otf|woff)$">
    Header set Access-Control-Allow-Origin "*"
</FilesMatch>

هذا ينبغي حل المشكلة. إذا لم يحدث ذلك ، فيجب أيضًا تغيير عناوين URL لملفات الخطوط في CSS إلى نسبية

bfintal هذه المعلومات رائعة يا صديقي ، شكرًا جزيلاً.

bfintal بفضل اللاعبين الرائعين في CloudFlare ، يجب أن يكون كل هذا جيدًا :)

حاول بجد تحديث ذاكرة التخزين المؤقت والاختبار. أعلمني كيف سيسير الامر.

جميل أنه يعمل الآن! (على الأرجح لـ IE أيضًا). شكرا رايان و ClourFlare! :)

شكرا يا شباب. يعمل علاجًا.

دخول المسار المطلق حل هذه المشكلة بالنسبة لي. شكرا!

حسنًا ، يعد أحد الأمثلة الرسمية على htacess المقدم من maxcdn ، فهو يحتوي على حل رائع للخط وأيضًا للسرعة فيما يتعلق بالمشكلات. http://support.netdna.com/tutorials/htaccess-examples/ أو راجع هذا الدليل http://wpvkp.com/font-awesome-doesnt-display-in-firefox-maxcdn/

لكنني لا أعرف ما إذا كان سيعمل عند استخدام cloudflare.

بفضل terinjokes ، لدينا الآن دعم CORS!

شكرًا على الشرح الجميل حول الخط الرائع - إصلاح مشكلة الموزيلا.
جئت عبر هذا المقال المفيد أيضا ...
http://wpvkp.com/font-awesome-doesnt-display-in-firefox-maxcdn/
الق نظرة...

في مجلد الخطوط يرجى تحميل الملفات التالية

FontAwesome.otf
fontawesome-webfont.eot
fontawesome-webfont.svg
fontawesome-webfont.ttf
fontawesome-webfont.woff
------------------ ملفات glyphicons المهمة ----------------
glyphicons-halflings-normal.eot
الحروف الرسومية-halflings-normal.svg
الحروف الرسومية-halflings-normal.ttf
glyphicons-halflings-normal.woff

يرجى تحميل الملفات التالية وبعد ذلك تقوم بربط font-awesome.min.css في ملف الرأس الخاص بك.

إليك الرابط التالي بالملفات المناسبة:
http://goo.gl/WICQAf

أهلا بكم.
لقد وجدت أن الخط الرائع لا يعمل في FF.
هل يمكنك مساعدتي كيف يجب أن أفعل؟

@ blueror815 إذا لم يكن هناك أي معلومات تفصيلية ، كيف يمكننا مساعدتك؟

شكرا لكل ما ساهم !!! هذا إصلاحه بالنسبة لي خليج إضافة إلى ملف .hta.


مجموعة الرأس Access-Control-Allow-Origin "*"

: +1: جميل

@ Subhojit1992 شكرًا ، إنه يعمل. لقد قمت بتنزيل css & الخطوط من الرابط المحدد. يعمل بشكل جيد الآن: +1:

خدم CDNJS ملفات الخطوط Font Awesome مع Access-Control-Allow-Origin "*" لفترة من الوقت الآن. يمكنني النظر في حالات محددة إذا تم تقديم مزيد من التفاصيل.

أواجه نفس الخطأ مع Firefox (يعمل بشكل جيد في جميع المتصفحات الأخرى). يتم عرض أيقونات FontAwesome على هيئة مربعات مستطيلة بها كود حرف unicode بالداخل.

لم يعد الخطأ مرتبطًا بـ CDNJS وأصبح الآن مشكلة في Firefox. يتم تحميل ملفات FontAwesome (css و woff) من CDN على ما يرام مع 200 OK.

سبب المشكلة هو أن Firefox لا يعرض Unicode بشكل صحيح عند إدخال حرف Unicode غير عادي مثل  مباشرة في الترميز. يعمل عند استخدام عنصر ومحتوى زائف ، على سبيل المثال:

yourelement::before {
    content: '\f067';
    font-family: FontAwesome;
}

@ J3QQ4 شكرا لتقريرك!

@ Subhojit1992 شكرا جزيلا .. بحلك مسحت هذه المشكلة ..

هل يمكن لأي شخص أن يخبرني بما يجب فعله لأن الخطوط المخصصة لدي لا تعمل في FF حتى على html المحلي ، ويظهر الخطأ نفسه "الخط القابل للتنزيل: فشل التنزيل (مجموعة الخطوط:" gotham_lightiform "النمط: الوزن العادي: الامتداد العادي: عادي فهرس src: 1): URI غير صالح أو الوصول عبر المواقع غير مسموح به المصدر: "لا يمكنني حتى تطبيق كود htaccess هنا.

thakurpunk آسف على الرد المتأخر ، هل من الممكن أن تعطينا عنوان url (عناوين) لديك مشكلة (أمثلة قليلة)؟

عملت مثل السحر!
تم حل المشكلة شكرا جزيلا :)
إضافة هذا إلى ملف htaccess يحلها>

مجموعة الرأس Access-Control-Allow-Origin "*"

مرحبا يا أصدقاء!
انسخ نموذج HTML الموجود في هذه الصفحة إلى index.html الخاص بك:
https://www.bootstrapcdn.com/fontawesome/
حظا سعيدا :)

هل كانت هذه الصفحة مفيدة؟
0 / 5 - 0 التقييمات

القضايا ذات الصلة

BorisMoore picture BorisMoore  ·  4تعليقات

drees picture drees  ·  6تعليقات

balihoo-dengstrom picture balihoo-dengstrom  ·  5تعليقات

netil picture netil  ·  5تعليقات

olafcm picture olafcm  ·  5تعليقات