Skip to main content

This is similar to the tip about adding a custom icon to Premium Member badges.

For this tip, we'll show you how to display a custom icon next to all Member Titles. Note that the same icon will be displayed for all titles in the example, since there is currently no way to differentiate member titles from a CSS standpoint.

First, let's see what our sample Member Title of "Dude" looks like without any styling:

Screen Shot 2015-10-31 at 10.15.18 AM

1. First, let's focus on simply adding an icon. You can inject a Font Awesome font icon with some simple custom CSS. You must select which font icon you want to use from the list on their website. Let's say you choose the fa-star icon. To insert this at the beginning of your Member Titles, you would use the following CSS:

    
.h-member-title:before {
content: "\f005";
display: inline-block;
font: normal normal normal 14px/1 'Font Awesome 5 Pro';
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0, 0);
margin-right: 5px;
}

The key to selecting the right icon is to change the "content" value in the above CSS to match the "Unicode" value listed on the icon's details page. We are using a star icon in this example. You should see on the star page that it lists "Unicode: f005" and you can see in the "content" value above that it is set to "\f005" (the leading backslash is a necessary escape character).

If you'd prefer to have the icon display after the name, you need to change ":before" in the CSS selector to ":after" and then change the "margin-right" to "margin-left" so that the proper margin is applied.

Once you're done, you should have a Member Title that looks like this:

Screen Shot 2015-10-31 at 10.20.32 AM

2. If you want to spice things up and make this look more like a label, then you'll want to apply some additional CSS that adds all of the standard label CSS properties to your Member Titles, like so:

.h-member-title {
background-color: #43ac6a;
color: #ffffff;
border-radius:5px;
display:inline-block;
vertical-align:text-top;
font-size:0.6875rem;
font-weight:normal;
line-height:1;
margin-bottom:auto;
padding:0.25rem 0.5rem;
position:relative;
text-align:center;
text-decoration:none;
white-space:nowrap;
}

You can change the background-color and font color in the example above to whatever you want, but I would advise against changing any other values above if you want it to have the same appearance as other labels in the system.

Once you add that CSS, you'll have Member Titles that look like this:

Screen Shot 2015-10-31 at 10.29.16 AM

Attachments

Images (3)
  • Screen Shot 2015-10-31 at 10.15.18 AM
  • Screen Shot 2015-10-31 at 10.20.32 AM
  • Screen Shot 2015-10-31 at 10.29.16 AM

Replies sorted oldest to newest

I'm trying to figure out where to put this CSS. I asked about adding badges to title names and I got this response and link to this article.

However, lots of people use small icons, inline with the member title, as a type of "badge." Here's an article that explains how to add a custom icon to member titles.

I somehow got to Automation Rules, then creating a rule for Activity Milestones using triggers, but I don't see where to add CSS. Can you point me to where I can do this so it can be based off of points or triggers?

Thanks!

VK

Add Reply

×
×
×
Link copied to your clipboard.
×