نعم، آسف، كان ينبغي أن أحدث مشاركتي. لقد اكتشفت أن Font Awesome يتطلب إضافتها إلى الإعداد.
وتعلمت مؤخرًا، كما ذكرت، الحاجة إلى إنشاء ملف svg sprite لرفعه إلى icons-sprites.
ما زلت أتعلم الكثير من الأمور الجديدة. أقدر مساعدتك في تطوير معرفتي. شكرًا لك.
كانت أيقونات التصنيفات في موقعنا تبدو رائعة حتى اليوم عندما سجلت الدخول. يبدو أن المسافة البادئة بين الأيقونة وعنوان التصنيف غير موجودة عند العرض. هل يواجه أي شخص آخر هذه المشكلة؟
على سبيل المثال…
أرى ذلك أيضًا، وأنا متأكد من أن بنار سيقوم بإصلاحه، لكن حتى ذلك الحين، سيحل هذا المشكلة
.select-kit .select-kit-header .selected-name .name .d-icon {
margin-right: .25em;
}
شكرًا لكما، يجب أن يكون هذا مُصلحًا الآن.
هل من الممكن استخدام أيقونات أخرى غير Font Awesome؟ إن منتدينا مخصص للسفر وأحتاج إلى أيقونات محددة جدًا غير موجودة هناك. هل يمكننا استخدام ملف أيقونة PNG عادي مثلما نفعل مع الفئات؟ شكرًا!
يمكنك استخدام أيقونات مخصصة إذا قمت بتحويلها إلى ملفات SVG وأضفتها إلى قالبك عبر رمز SVG. راجع قسم “إنشاء ورقة رموز SVG” في هذا الدليل لمعرفة كيفية إضافة أيقونات مخصصة إلى موقعك، والتي يمكنك استخدامها بعد ذلك في هذا المكون (وفي جميع أنحاء موقع Discourse).
يعمل بشكل رائع!
هل من الممكن تعديله بحيث يظهر الرمز بعد عنوان الفئة؟
سؤال إضافي: هل يمكن إضافة تلميح أداة/نص بديل؟
(الخلفية: أنا أخفي رمز القفل وأستخدم هذا المكون بدلاً من ذلك لإضافة رمز إلى الفئات العامة القليلة التي أملكها. وأود أن أتيح للمستخدمين طريقة لمعرفة ما يرمز إليه الرمز.)
أواجه مشكلة في استخدام الأيقونات المخصصة الخاصة بي. لم أجد أي معلومات تخبرني ما إذا كان يجب استخدام بادئة أم لا. إليك ما أفعله.
إليك ملف SVG الذي أستخدمه - https://andronixforumupload.ams3.digitaloceanspaces.com/original/1X/bdabc28a604dc98bb25ce8af2ef6f8dc7c9f2626.svg
كما تلاحظ، لا يمكنني رؤية أيقونة Arch على الإطلاق.
icons-sprite:
my-icon في ملفك، فاكتب ما يلي:النتيجة:
@Canapin هذا لا يعمل. إليك ملف السبريت الخاص بي - ملف السبريت
معرف الصورة الذي أحاول استخدامه - هنا
إليك ما أفعله -
هل أفعل شيئًا خاطئًا؟
في ورقة الصور (spritesheet) الخاصة بك، حاول استبدال:
<svg width="0" height="0" class="hidden">
بـ:
<svg xmlns="http://www.w3.org/2000/svg">
أيضًا، لا حاجة لإضافة معرف الأيقونة في حقول إعداد أيقونات SVG، حيث أن جميع أيقونتك المخصصة متاحة بالفعل من ورقة الصور التي قمت برفعها.
أعتقد أن إعداد أيقونات SVG مخصص لتحميل أيقونات Font Awesome إضافية، حيث أن Discourse يقوم افتراضيًا بتحميل مجموعة صغيرة ومحددة فقط.
@Canapin شكرًا لك! لقد نجح الأمر على أكمل وجه. لدي سؤال آخر، هل ملف السبرايت هذا مخصص لمكون معين أم يمكنني الوصول إلى الأيقونات بمعرفاتها في أي مكان؟
عند رفع ملف إلى سمة مستخدمة أو مكون سمة، يمكنك استخدامه في أي سمة أخرى، لذا أعتقد أنه يمكنك استخدام معرفات الأيقونات الخاصة بك في أي مكان.
مرحبًا بينار، هل يدعم هذا إضافة Font Awesome Pro الجديدة؟ أم أن هناك طريقة لاستخدامها بالفعل قد فاتتني؟ شكرًا لك!
يجب أن يعمل مع إضافة Pro، نعم. هل تلاحظ ملفات SVG غير Pro لأيقونات التصنيفات فقط؟
نعم، بعد إزالة sprite الخاص بي، يتم عرض غير المحترف فقط. كما أن غير المحترف لا يتبع إعداد fa_icon_style للأيقونات الفاتحة وما إلى ذلك.
حسناً، هذا يعمل بشكل جيد على موقعي المحلي.
هذه أيقونة الترس، باستخدام الإضافة مع اختيار نمط “Light”. قارن ذلك بالنمط العادي أدناه.
لكن ربما لا أتحقق من العنصر الصحيح… أخبرني إذا كانت هناك أيقونة محددة لا تظهر بشكل صحيح لديك.
إليك مثال مع تعيينه على الوضع الفاتح. تحتوي “مراجعات الصور” على الأيقونة comment-alt-edit ولا يتم عرضها (وهي أيقونة مدفوعة)، بينما تحتوي “عرض الصور” على الأيقونة images وهي غير مدفوعة، لكنها تعرض النسخة العادية وليس الفاتحة. تظهر “المناقشات” النسخة الصلبة من comments، بينما تظهر “المجتمع” النسخة الفاتحة من users كما هو متوقع.
لقد جربت تغيير أحد الأيقونات إلى cog، وعمل ذلك كما هو متوقع مع النسخة الفاتحة الصحيحة. هناك الكثير من الأمور الغريبة تحدث هنا!
هل جربت استخدام far-comment-alt-edit؟
حسناً، فهمت الآن. المفتاح هو وجود far- في قائمة أيقونات التصنيف، وليس في أيقونات SVG. إذن، بالنسبة للأيقونات الخفيفة، يجب عليّ تغييرها جميعاً إلى fal-، وهذا لا يتبع إعدادات الموقع لـ نمط أيقونة Font Awesome، صحيح؟
