Badge icons - where to find them?

(Anton) #1

Searching for “badge icon” does not give an answer about where is the list of available values for Badge Icon field. Please advise.

Also, is there any dedicated documentation about badges for admins?

Custom images/css for badges
(Kris) #2

we use font awesome - the list of available icons is here

(Anton) #3

Thank you. So if I want a custom picture, for example “cheese”, I can’t, right?
Our forum is for Ukrainian goat farmers, so we need quit thematic badge icons, e.g. cheese, milk and, well, a goat!

(Kane York) #4

You can actually do that with CSS trickery, if you’re up to it.

(Anton) #5

How? Should I just load more fonts?

(Kane York) #6

Here’s an example of the styles that FA applies. I’ll use <i class="fa fa-heart"></i> as the example.

.fa {
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
.fa-heart:before {
  content: "\f004";

So you could do this in your site stylesheet:

.fa-custom-burger:before {
  content: "\01f354";
  font-family: inherit;

And get :hamburger: as your badge icon when you enter custom-burger.

(Anton) #7

How will it load the related custom font?

(Kane York) #8

Check out the “HTML Head” section in the “Content” tab of the admin panel.

(Gordon Ryan) #9

@riking- willing to step by step of the custom icon method for an admittedly ignorant admin? Seriously confused.

Or anyone else who knows how to do this :smiley:

(Kane York) #10

Scenario 1, this is what you probably want:

  1. Look on Font Awesome Icons for the icon you want
  2. Let’s say you picked fa-car fa-car: Font Awesome Icons
  3. Go to the badge page, enter fa-car in the Icon field

Scenario 2, this is what the rest of the thread is talking about:

  1. Look on Font Awesome Icons for the icon you want

  2. You don’t find it

  3. You find it as a Unicode Emoji. Let’s say it’s :hamburger:, which is U+01F354

  4. Pick a custom name - e.g. fa-custom-burger

  5. Add this to your site stylesheet:

    .fa-custom-burger:before {
      content: "\01f354";
      font-family: inherit;
  6. Assign fa-custom-burger as the badge icon

(Jens Maier) #11

That only works if the font used to render the badge actually contains the glyph. If you do this, use a custom font such as EmojiSymbols or expect complaints from Windows users (and possibly other desktop users).

(Gordon Ryan) #12

Awesome, thanks! I was actually referring to the second scenario. Very helpful.

(Gordon Ryan) #13

@elberet how would I go about enabling a custom font like that?

(Jens Maier) #14

You’d do that with custom CSS. First import the font itself as a web font, then redefine the .fa style to use the emoji font as a fallback after the actual font awesome font. The browser should now be able to render the glyph riking mentioned via the new emoji font.

(Gordon Ryan) #15

Killer. Thanks for your help!

(SirWill) #17

We can’t use a .png as badge icon?

(Michael Downey) #18

Any plans to update the font-awesome libraries from upstream? Some of the newer icons are missing still. :wink:

(cpradio) #19

Yes, you can. Read and you’ll quickly figure it out. :wink: Maybe try a search too :smile:

(RBoy) #20

This is excellent post.

I have a suggestion @sam, on the Badges admin page provide an instruction link to this post or (preferably) update the instructions in one line (below) so that folks know how to get started. Something like

Either enter a Font Awesome icon name from (e.g. fa-car) OR URL to an image