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:
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:
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:
