Font Awesome in user rank

Caribe_Soy · Apr 7th 2016

Hello everyone,

I'd like to add an icon before user rank, I already did it with this:

CSS

.userTitleBadge.red::before {
    font-family: "FontAwesome";
    content: "\f0e8";
}

As a result I obtain this:

How can I add some space right after the icon? I tried adding an space after the unicode ("\f0e8 ") but I got the same result.

Regards.

Macondiana · Apr 7th 2016

Untested but will one of these two not work.

Code

.userTitleBadge.red::before {
    font-family: "FontAwesome";
    content: "\f0e8";
    margin-right: 4px;
}

Or this one.

Code

.userTitleBadge.red::before {
    font-family: "FontAwesome";
    content: "\f0e8";
    padding-right: 4px;
}

Macondiana · Apr 7th 2016

Quote from Caribe_Soy

How can I add some space right after the icon? I tried adding an space after the unicode ("\f0e8 ") but I got the same result.

No idea, but instead of using space bar to create a space, you could try inserting a none line breaking HTML code space entry like this below

Code

&nbsp;

Caribe_Soy · Apr 7th 2016

Thanks @GTB, I'm not sure where I should add the

HTML

&nbsp;

in the template:

Code: messageSidebar

<div class="userTitle">
<p class="badge userTitleBadge{if $userProfile->getRank() && $userProfile->getRank()->cssClassName} {@$userProfile->getRank()->cssClassName}{/if}" itemprop="title">{$userProfile->getUserTitle()}</p>
</div>

Anyway, I already solved it. It was something stupid: I was trying to add a margin to the element without the ::before, so I thought it had to be via unicode. I got it working now:

CSS

.userTitleBadge.red::before {
    font-family: "FontAwesome";
    content: "\f0e8";
	margin-right: 5px;




}

Font Awesome in user rank

Share

Tags