# Howto: Change lock icon for restricted categories

**URL:** https://meta.discourse.org/t/howto-change-lock-icon-for-restricted-categories/26217
**Category:** Support
**Created:** [3월 11, 2015, 3:19오후 UTC](https://meta.discourse.org/t/howto-change-lock-icon-for-restricted-categories/26217 "2015-03-11T15:19:22Z")
**Posts on this page:** 11
**Page:** 1

<div class="post-metadata">

### Author: ![tobiaseigen](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tobiaseigen/32/539204_2.png) [@tobiaseigen](https://meta.discourse.org/u/tobiaseigen)
#### Post date: [3월 11, 2015, 3:19오후 UTC](https://meta.discourse.org/t/howto-change-lock-icon-for-restricted-categories/26217/1 "2015-03-11T15:19:22Z")

</div>

Continuing the discussion from [Alternatives to lock icon for categories](https://meta.discourse.org/t/alternatives-to-lock-icon-for-categories/24815/63):

> [@Alternatives to lock icon for categories](https://meta.discourse.org/t/alternatives-to-lock-icon-for-categories/24815/63):
>
> ```
> .badge-category i.fa.fa-lock:before { content: ""; } /* remove the existing icon */
> 
> ```

@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!

---

<div class="post-metadata">

### Author: ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [3월 11, 2015, 3:30오후 UTC](https://meta.discourse.org/t/howto-change-lock-icon-for-restricted-categories/26217/2 "2015-03-11T15:30:25Z")

</div>

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/](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/](http://fortawesome.github.io/Font-Awesome/icon/eye-slash/) )

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

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

```

---

<div class="post-metadata">

### Author: ![tobiaseigen](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tobiaseigen/32/539204_2.png) [@tobiaseigen](https://meta.discourse.org/u/tobiaseigen)
#### Post date: [3월 11, 2015, 4:09오후 UTC](https://meta.discourse.org/t/howto-change-lock-icon-for-restricted-categories/26217/3 "2015-03-11T16:09:56Z")

</div>

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?

---

<div class="post-metadata">

### Author: ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [3월 11, 2015, 4:37오후 UTC](https://meta.discourse.org/t/howto-change-lock-icon-for-restricted-categories/26217/4 "2015-03-11T16:37:11Z")

</div>

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

---

<div class="post-metadata">

### Author: ![tobiaseigen](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tobiaseigen/32/539204_2.png) [@tobiaseigen](https://meta.discourse.org/u/tobiaseigen)
#### Post date: [3월 11, 2015, 6:09오후 UTC](https://meta.discourse.org/t/howto-change-lock-icon-for-restricted-categories/26217/5 "2015-03-11T18:09:22Z")

</div>

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?

![](https://global.discourse-cdn.com/meta/original/3X/9/0/904cb3cfc449ab02b2ac7d62c3ca27511be9ec8a.png)

---

<div class="post-metadata">

### Author: ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [3월 11, 2015, 6:20오후 UTC](https://meta.discourse.org/t/howto-change-lock-icon-for-restricted-categories/26217/6 "2015-03-11T18:20:29Z")

</div>

```plaintext
.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.

---

<div class="post-metadata">

### Author: ![tobiaseigen](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tobiaseigen/32/539204_2.png) [@tobiaseigen](https://meta.discourse.org/u/tobiaseigen)
#### Post date: [3월 11, 2015, 6:39오후 UTC](https://meta.discourse.org/t/howto-change-lock-icon-for-restricted-categories/26217/7 "2015-03-11T18:39:28Z")

</div>

that worked! you’re a star. 🌟

---

<div class="post-metadata">

### Author: ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [3월 11, 2015, 6:44오후 UTC](https://meta.discourse.org/t/howto-change-lock-icon-for-restricted-categories/26217/8 "2015-03-11T18:44:26Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![dax](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dax/32/244677_2.png) [@dax](https://meta.discourse.org/u/dax)
#### Post date: [5월 18, 2018, 10:57오전 UTC](https://meta.discourse.org/t/howto-change-lock-icon-for-restricted-categories/26217/9 "2018-05-18T10:57:25Z")

</div>

Changing an icon globally is very simple using APIs

> [@Change icons globally](https://meta.discourse.org/t/change-icons-globally-using-the-apis/87751):
>
> This is an easy way to change a Discourse icon globally. Right click on the icon you want to change and select “Inspect element” or “Inspect” (depends on the browser) Find the icon name Search a new icon here [Find Icons with the Perfect Look & Feel | Font Awesome](https://fontawesome.com/icons?d=gallery), e.g. [external-link-alt](https://fontawesome.com/icons/external-link-alt?style=solid) Customize and add the code in your admin \> customize \> themes \> edit code -\> JS tab // {theme}/javascripts/discourse/api-initializers/init-theme.gjs import { apiInitializer } from "disco…

---

<div class="post-metadata">

### Author: ![dax](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dax/32/244677_2.png) [@dax](https://meta.discourse.org/u/dax)
#### Post date: [5월 18, 2018, 10:58오전 UTC](https://meta.discourse.org/t/howto-change-lock-icon-for-restricted-categories/26217/10 "2018-05-18T10:58:10Z")

</div>



---

<div class="post-metadata">

### Author: ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [2월 12, 2024, 9:40오전 UTC](https://meta.discourse.org/t/howto-change-lock-icon-for-restricted-categories/26217/11 "2024-02-12T09:40:34Z")

</div>

이 항목에 대한 작은 업데이트입니다 - [Category Icons](https://meta.discourse.org/t/category-icons/104683) 테마 컴포넌트에 이제 카테고리 잠금 아이콘을 더 쉽게 교체할 수 있는 내장 설정이 추가되었습니다. 🎉
