رموز الفئات

:warning:
هذا مكون السمة قديم ولا ينبغي استخدامه بعد الآن. مزاياه موجودة الآن في نواة Discourse (انظر: إدراج الميزات الشائعة في Discourse).
للتخصيص الخاص بأيقونات الفئات الخاصة، راجع هذا الموضوع.

:discourse2: ملخص تتيح أيقونات الفئات وجود أيقونات بجانب اسم الفئة في روابط شارات الفئات.
:eyeglasses: معاينة معاينة في منشئ سمات Discourse
:hammer_and_wrench: رابط المستودع https://github.com/discourse/discourse-category-icons
:open_book: جديد في سمات Discourse؟ دليل المبتدئين لاستخدام سمات Discourse

تثبيت هذا المكون من السمة

الميزات

:information_source: يُستخدم هذا المكون من السمة جنبًا إلى جنب مع مكون السمة Category Badge Styles

إليك مثال على كيف سيبدو ذلك، مع ضبط نمط شارة الفئة على none:

إليك كيف سيبدو ذلك مع ضبط نمط شارة الفئة على box:

الإعدادات بسيطة جدًا:

لاحظ أن هذا المكون يتيح لك أيضًا تجاوز أيقونة قفل الفئة المستخدمة للإشارة إلى الفئات الخاصة.

:information_source: انظر أيضًا مكون أيقونات الوسوم (الذي يقوم بنفس الشيء للوسوم).

الإعدادات

الاسم الوصف
قائمة أيقونات الفئات قائمة الفئات وأيقوناتها المقابلة
أيقونات SVG إضافة أيقونات إضافية غير مدرجة افتراضيًا
أيقونة قفل الفئة الأيقونة لاستبدال “أيقونة قفل الفئة”
  • لإضافة أيقونة إلى فئة، أدخل التفاصيل مفصولة بفواصل مثل هذا: “slug,icon,color,match”
  • يكون اللون بالتنسيق #123456، أو “categoryColor” لاستخدام اللون الافتراضي للفئة (نفس لون الشارة)
  • إذا كانت المطابقة “partial”، فيجب أن يطابق slug جزءًا فقط من slug الفئة، وإلا فإن المطابقة التامة مطلوبة.

المشكلات

  • لا يحترم لون الأيقونة بشكل صحيح عند استخدامه مع نمط الفئة bullet. بشكل عام، لا ينبغي استخدام هذا النمط مع أنماط الفئة bullet أو bar لأن واجهة المستخدم ستكون مزدحمة بشكل غير ضروري.

تاريخ التطوير

شكرًا لـ @rogerco، لإضافة الكلمة المفتاحية “partial” لمطابقة جزئية لـ slugs الفئات (أي إدخال “book,icon,red,partial” سيُطابق جميع slugs الفئات التي تحتوي على “book”). :trophy: :clap:

:discourse2: مُستضاف عندنا؟ تتوفر مكونات السمة للاستخدام في خططنا القياسية، والأعمال، والمؤسسات.

84 إعجابًا
Bringing popular features to Discourse: Header search, welcome banner, and category icons / emoji
How to display font awesome icons alongside category?
Put an emoji in the category
Ability to display category icons in sidebar
[PAID] Assistance to Set-up My Forum
Duplicate icons on categories page
Icons next to categories
Amazing customized community
Alternatives to padlock icons on secured categories
Amazing customized community
Icons next to categories
Hide Lock Badge Icon
Discourse Category Headers theme component
Our new Basic Plan is now available. Try it out today!
Styling the sidebar without using CSS?
Moving to a Single Category Style Site Setting
How can I put custom icons next to categories?
Duplicated icon in composer's category dropdown
Moving to a Single Category Style Site Setting
We're upgrading our icons to Font Awesome 6!
Private categories padlock icon
Hide Lock Badge Icon
Flag icon before name in subcategory (bullets)
Subcategories only show up after refresh and a few other issues
(板块分类)How to set up board categories similar to the Fit2Cloud forum in Discourse?
Category Icons color and size is not being inherited correctly
How to change category title icon?
Ability to display category icons in sidebar
What are good plugins or theme components for a forum emphasizing pictures?
Suggestions for achieving a custom layout without having to code everything
Hide Lock Badge Icon
How to show category image before category name on listing pages?
Create a category in Discourse
Howto: Change lock icon for restricted categories
Categories: public vs. logged in only vs. restricted
Can the background color in front of the navs in the sidebar be changed to a small icon?
Unable to alter the lock icon in category boxes
Theme component to use "Category icons" in "Events plugin" calendar
Is there a plugin of some sort to have an Icon next to a category?
Looking for a freelancer to implement a custom Discourse theme (based on an existing mockup)
How to add customs icon with Category Icons Theme components now that we can't upload files into TC
Uncaught TypeError: Cannot read property 'apply' of undefined
Category Banners
Removing the legacy hamburger navigation menu option
Category color selection should be allowed even when style is "none"
How to use icons in my javascript?
How to display font awesome icons alongside category?
Category color selection should be allowed even when style is "none"
Removing the legacy hamburger navigation menu option

This component has had an impact on our forum in an artistic way. I like it.

However there is a problem with category names. I created a category with the name of “Doğa Bilimleri”, but later changed its name to “Bilim” and created a sub-category with the name of “Doğa Bilimleri”.

Before:
Before

After:
After

I only assigned an icon for the category of “Doğa Bilimleri”, not for “Bilim”.

doga-bilimleri-flask

But the flask icon has been assigned for both “Bilim” and its sub-category “Doğa Bilimleri”.

Flask-assigned-for-both

I cannot also assign an icon to a category whose name I change if I use the new name of it, yet the old name always works. (I solved this one: This is all about “category slug”. If you leave the category slug with the old name, you will experience same pseudo-problem.)

Edit: I figured out why the flask icon is assigned for the main category. It is because both the main category and the sub-category include same word “Bilim”. Even if I give a random name like “abcdefbilimghjk” in the category icon list, it will still assign the icon I choose to the category “Bilim”, since the random name includes the word “bilim”.

abcdefbilimghjk

5 إعجابات

Hi Emre, thanks for the report, I’ve now fixed the issue with loose matching of slugs. If you update the theme, it should be resolved, “abcdefbilimghjk” will no longer apply the icon to the “bilim” slug.

8 إعجابات

It’s been perfectly resolved. Thanks for the update :+1:

6 إعجابات

This is an awesome component! Works great on my site! ty for doing this :smiley:!awe

6 إعجابات

Can I use this icon as “js”?

image

Only bash has the icon, the others has an emty space.

image

What do I miss?

إعجاب واحد (1)

Have a look here to learn how to use new font awesome icons

4 إعجابات

Thanks, but how that breaks down to using this component as a plugin user?

Should I wait for something to merge to master before I can use the plugin?

Or did I misunderstand the method to define how can I specify my font awesome icons?

إعجاب واحد (1)

Use fab-js instead of js in both fields since it’s a brand icon and FA groups brand icons separately.

Same for the Java icon, though you should be on tests-passed for that to work, because the Java icon was added to FontAwesome recently.

4 إعجابات

Can this component be extended to support custom made svg icons?

إعجابَين (2)

Custom SVG icons are already supported in plugins, see Introducing Font Awesome 5 and SVG icons for details. Custom SVG icon support in themes is in the works.

8 إعجابات

Thank you for quick response. I will look into it.

إعجاب واحد (1)

First, a big thank you to @pmusaraj for making this great theme-component.

I have configured it on my site, but have two issues:

There seems to be no way I can “attach” any icon to Jadran category
I have tried with various icons, even the ones that are working on other categories with no success.

Configuration is the same as for other categories:

It seems that pull-downs in category view, does not respect the icon color (white).
Here it looks the worst - gray on gray.

Elsewhere, white color is respected:

إعجاب واحد (1)

I have an idea, why “Jadran” does not work: I have another category “Jadranje”, which includes first name. I would expect that slug would be checked with exact match (everything between /), right?

إعجاب واحد (1)

In the URL you posted https://pojalabanda.com/c/potovanja/jadran, I see the icon next to Jadran.

I do see the style issue, it’s something that’s been recently introduced, I’ll look for a solution.

4 إعجابات

Yes, I got idea for workaround: have replaced the order of “rules” in the config, so that longer name is after shorter:
image

It works now!

Thanks for checking the problem and for confirming style issue.

3 إعجابات

Is there a possibility to upload own svg icon and then use it as category icon? I tried to upload it on Category icons upload, but not sure how should I reference it?

Or am I completely on wrong track here?

إعجابَين (2)

It’s slightly different, you need to upload an svg sprite. See this:

6 إعجابات

I have pushed a fix for the style issue in core: UX: Inherit badge icon color · discourse/discourse@8d098df · GitHub

Once this passes tests, you need to rebuild your app, icon colors should then respect the badge color.

6 إعجابات

Do you have any plans to extend this to the sub-category boxes Penar? Would be awesome to have them everywhere. My site looks great with all these icons now, appreciate this!

5 إعجابات