Skip to main content

One of the new features is support for Font Awesome font icons. The advantage of using font icons is that they can scale to different sizes without distorting whereas using images can't scale without distorting or adding blurriness.

New to the applilcation are text-based member badges instead of image-based badges. If you want to add some extra flair to your premium member badge, you can inject a Font Awesome font icon with some simple custom CSS. First, you must select which font icon you want to use from the list on their website. Let's say you choose the fa-fighter-jet icon. To insert this at the beginning of your premium member badge, you would use the following CSS:

.h-member-badge-premium:before {
  content: "\f0fb";
  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. You should see on the fighter-jet page that it lists "Unicode: f0fb" and you can see in the "content" value above that it is set to "\fofb" (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 badge that looks something like this:

vip-badge

You can make similar changes for any other permission circle badges you'd like, too. To do so, you just need to target the proper h-member-badge-<ID> CSS class, where the ID is the numeric ID for the permission circle.

Attachments

Images (1)
  • vip-badge

Replies sorted oldest to newest

Hi Brisotti,

The code should go into your Display Settings control panel in the Custom CSS box. You need to make sure you use the permission circle's group ID instead of "premium" if it's not a premium permission group. For your Patrocinador circle, that numeric ID is 350043526109298115, which you can see in the URL when editing the permission circle's details. I changed your selector to .h-member-badge-350043526109298115, which fixed the problem (you also had replaced the 'h' with "webkits" which was not correct)

Hope that helps!

Brian

Brian Lenz

Hi Brisotti,

For that specific badge, the selector is .h-member-badge-350043526109298115 so the font can be controlled with something like this:

.h-member-badge-350043526109298115 { font-size: 0.8rem; }

Note that we don't generally offer free assistance with Custom CSS. Custom CSS assistance falls under our Advanced Support, which is $150/hour. I've made an exception here to get you going in the right direction. If you need further assistance, please open a new support topic.

Regards,

Brian

Brian Lenz

Add Reply

×
×
×
Link copied to your clipboard.
×