Howto: Change lock icon for restricted categories

AI 生成的摘要

In this support thread, tobiaseigen seeks a clear howto for replacing the lock icon used for restricted categories in Discourse, as users confuse it with the topic lock icon. cpradio provides a step-by-step guide: remove the default lock icon using CSS, then replace it with any Font Awesome icon by pasting its Unicode value (e.g., \f070 for eye-slash). tobiaseigen tests the change and reports it works everywhere except top-level categories on the categories page. cpradio clarifies that both CSS rules are needed — one for category badges and another for dropdowns — and confirms both must be applied together. tobiaseigen confirms success and thanks cpradio, who further explains the distinct purposes of each rule. Later, dax mentions a global icon-changing API, and JammyDodger notes that the Category Icons theme component now includes a built-in setting to simplify this process, making icon swapping even easier.

Continuing the discussion from Alternatives to lock icon for categories:

@cpradio could you or someone else provide a simple howto for changing the lock icon for categories? It’s now coming up in my community as something they find confusing because it is the same as the topic lock icon. I had some trouble finding the actual howto instructions in this thread.

Would be grateful!

Sure. First off, what do you want it changed to? (as the above will remove the lock icon)

To switch it, you simply go to the font-awesome website ( http://fortawesome.github.io/Font-Awesome/icons/ )

Click on the icon you want (that exists within the version of Font Awesome Discourse is using). Copy its unicode value ( see http://fortawesome.github.io/Font-Awesome/icon/eye-slash/ )

Paste the unicode value in the “” next to context and put a slash in front

.badge-category i.fa.fa-lock:before { content: "\f070"; }
.category i.fa.fa-lock:before { content: '\f070'; }

AWESOME! Thanks so much for clarifying this. Will be great for other customizations as well.

Now to find a good icon.. hesitate to ask and return to the bikeshedding going on in the other thread, but… what are other sites using?

We use eye-slash, it makes it clear to us at least that it isn’t a publicly visible area.

I changed it to eyeslash on my site using @cpradio howto, but weirdly it did not change for top level categories on the categories page. Did change it everywhere else though. Any ideas?

.badge-category i.fa.fa-lock:before { content: "\f070"; }
.category i.fa.fa-lock:before { content: '\f070'; }

Edit: You may not need the first CSS rule with this one. It might take affect on all of the instances.

that worked! you’re a star. :star2:

Just so you know, it seems both rules are necessary, as the first rule covers the category drop downs on the Latest page and New Topic dialog, and the second rule covers all page write outs of the category badges.So you can’t just use one, you have to use them both.

Changing an icon globally is very simple using APIs

关于此问题的一个小更新:Category Icons 主题组件现在内置了设置,可以更轻松地更换类别锁定图标。 :tada: