رموز العلامة

[Discourse]

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

تثبيت هذا المكون للموضوع

نظرًا لأن هذا مكون موضوع #رسمي يتم صيانته من قبل فريق Discourse، يمكن تقديم طلبات #الدعم، و#الأخطاء، و#تجربة المستخدم، و#الميزات في الفئات المناسبة هنا على Meta، مع وضع العلامة المناسبة للمكون الموضوعي. انقر على أحد الروابط أدناه لبدء واحد.

 الدعم  أخطاء  تجربة المستخدم  ميزة

الميزات

إليك مثال على كيفية ظهور هذا مع تعيين نمط الوسم على الافتراضي (بسيط):

وهكذا يبدو مع تعيين نمط الوسم على box:

الإعدادات

الاسم	الوصف
قائمة أيقونات الوسوم	أدخل تكوينًا مفصولًا بفواصل للوسوم، بالصيغة “وسم-اسم،أيقونة،لون_الأيقونة”. لون الأيقونة اختياري.
أيقونات SVG	قائمة بأيقونات FontAwesome 6 المستخدمة في هذا المكون للموضوع

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

[TheBestPessimist]

Does this also work with custom svg?

[pmusaraj (Penar Musaraj)]

Yes, but you would need to register the custom SVG in a plugin (themes should soon also be able to add custom icons to the SVG sprite set). See Introducing Font Awesome 5 and SVG icons for details.

[davidkingham]

Now that custom icons in themes has been merged is it possible to use FA Pro icons with this or does the component need to be updated?

[pmusaraj (Penar Musaraj)]

Component doesn’t need to be updated, if you add custom icons via theme/plugin they will be available to the component.

[davidkingham]

Could the icon be added to the dropdown menu as well?

[AntiMetaman]

This allows one to add custom icons to tag, but what if I wanted to change the color of the box of the tag?

[pmusaraj (Penar Musaraj)]

You can do that with CSS, for example, the code below will set the “theme-component” text color to red:

.extra-info-wrapper .discourse-tag[data-tag-name="theme-component"] {
color: red !important;
}

(This is just for illustrative purposes only, you’ll need to figure out your own CSS.)

[AntiMetaman]

I see thanks. I just have to list every tag I have in the CSS by name and specify the color. Would be nice though if I could do this from the admin panel like with the theme components using a comma separated list and providing the hex code just like for the icons.

Is there a way I can set a color for all tags in a tag group via CSS?

[HeyRR]

I ended up getting something like this: (The default tag icon is still here)

Does anyone see this kind of result?

[pmusaraj (Penar Musaraj)]

Look for “tag style” in your site settings, and change it to simple, that will remove the grey bullets.

[HeyRR]

I see, thanks, but I will need the default grey bullets for all other tags. I achieved this by remove that bullets for specific tag:

a[data-tag-name="test1"]::before {
    display:none!important;
}

[sebastianh (Rebastion)]

Looks like a fantastic tweak. Question for advice to the author: I am thinking of pimping my bland tags, some of which I use to tag posts by language (so I have tags “castellano”, “deutsch” etc.), with little country flags. Would uploading a custom .svg as described above be the way or are there preconfigured iconsets or maybe discourse-built-in emoji-sets that could be used?

[pmusaraj (Penar Musaraj)]

An emoji would make sense for country flags, but this component does not use emojis, it uses icons from an icon set like Font Awesome.

You can try adding the emoji directly in the tag label. I tried this locally, and the tricky thing is that tags can’t have spaces. An example:

If you are ok with the dash, that’s the way to go.

[sebastianh (Rebastion)]

Oh wow that is actually rather neat. Minus the dash but I could probably live with it. Might even be worth trying a tag that is just a flag emoji…

[pmusaraj (Penar Musaraj)]

Yes, just an emoji is cool… but you won’t be able to easily find that from a search in the tag dropdown (when posting).

[sebastianh (Rebastion)]

Ok just one more semi-stupid question: how do I get the emoji to work as you did above with the francais? I tried creating a tag ":sweden:-svenska" but it doesn’t translate to the swedish flag

[pmusaraj (Penar Musaraj)]

You need to use an emoji symbol (on mobile, for example, you would switch to the emoji keyboard).

[sebastianh (Rebastion)]

Ohhhh I thought the emojis in Discourse. Okay, need to switch to a mobile then. I thought I could somehow use these. It worked thanks!

[renato (Renato Atilio)]

@pmusaraj

ميزة مجموعات الوسوم بالتأكيد ميزة مرغوبة، لكنها تتطلب بعض التعقيد، وفي الوقت الحالي لا أملك الوقت الكافي للعمل عليها.

إذا فهمت الأمر بشكل صحيح، فلا توجد طريقة سهلة لاكتشاف المجموعة التي ينتمي إليها وسم معين داخل مُعرِّض الوسوم؟

@davidkingham

هل يمكن إضافة الأيقونة إلى القائمة المنسدلة أيضًا؟

هذه الفكرة ستكون رائعة. كنت أستخدم سابقًا نهج CSS مخصصًا ثم تخلّيت عنه لصالح مكون القالب هذا مع أيقونة احتياطية لجميع الوسوم غير المحددة (على الأقل قبل دعم مجموعات الوسوم)، وهذا هو الشيء الوحيد الذي أفتقده.

وبالنظر إلى أن discourse-category-icons يدعم هذه الميزة، فأنا أظن أن المُعرِّض الذي تستبدله replaceCategoryLinkRenderer يُستخدم في القائمة المنسدلة للفئات، بينما المُعرِّض الذي تستبدله replaceTagRenderer لا يُستخدم في القائمة المنسدلة للوسوم، أليس كذلك؟ لذا قد يتطلب هذا الأمر تغييرًا في النواة. فالقائمة المنسدلة للوسوم في المُنشئ تستخدم المُعرِّض المستبدل، مع الأيقونات.