Hello everyone,
I'd like to add an icon before user rank, I already did it with this:
.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.
Untested but will one of these two not work.
.userTitleBadge.red::before {
font-family: "FontAwesome";
content: "\f0e8";
margin-right: 4px;
}
Or this one.
.userTitleBadge.red::before {
font-family: "FontAwesome";
content: "\f0e8";
padding-right: 4px;
}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
Thanks @GTB, I'm not sure where I should add the
in the template:
<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:
.userTitleBadge.red::before {
font-family: "FontAwesome";
content: "\f0e8";
margin-right: 5px;
}Don’t have an account yet? Register yourself now and be a part of our community!