How to change notification level icons?

Support
1

Is there a way to change tracking icons?

Pasted image1392×806 138 KB

I’d like to try using loud-speaker as a base for all 4 icons. The circle makes little sense and I notice that my users never click there and don’t know what is that for. I think a different icon would bring their attention.

1 Like
2

I’d be tempted to put a picture of a letter on Watching, since that’s what we use to indicate “yes, you’ll get emailed on this category/topic”

now that I think about it… there’s nothing really alarming to indicate a ! in the first place.

1 Like
3

Add this to your custom CSS:

.icon.fa.fa-circle.tracking::before {
    content: "\f0a1";
}

That’s just the icon though. You could add a color, background color and radius to make a circle if you’re feeling fancy.

7 Likes
4

And so for the envelope I want, I’ll use f003

I see that these can be looked up on FontAwesome:

http://fortawesome.github.io/Font-Awesome/icon/envelope-o/

and snag the Unicode identifier.

Thanks so much @Tom_Newsom

2 Likes
5

So, my completed set is:

.icon.fa.fa-circle.tracking::before {
content: "\f075";
}
.fa.fa-circle.tracking::before {
content: "\f075";
}

.icon.fa.fa-exclamation-circle.watching::before {
content: "\f003";
}
.fa.fa-exclamation-circle.watching::before {
content: "\f003";
}

This leaves me with envelopes for topics which will get you emailed (watching), and a chat bubble for topics which will just notify you (tracking).

I don’t know how to put a blue circle around the envelope, but I think this is a great improvement over the Exclamation point.

1 Like
6

It’s called “stacking”
http://fortawesome.github.io/Font-Awesome/examples/

<span class="fa-stack">
  <i class="fa fa-envelope fa-stack-1x"></i>
  <i class="fa fa-circle-o fa-stack-2x"></i>
</span>

4 Likes
7

Wow, font awesome really is, well, awesome :smile:

1 Like
8

Could anyone indulge me with the syntax of getting a stacked icon to instead of the normal icon?

Circle-thin is a thing in Font-Awesome 4.1, and I’d love to put that around all the iconf for uniformity.

<span class="fa-stack">
  <i class="fa fa-envelope fa-stack-1x"></i>
  <i class="fa fa-circle-thin fa-stack-2x"></i>
</span>
9

Changing an icon globally is very simple using APIs

3 Likes