Font Awesome in user rank

  • 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.

    My styles and plugins in the Plugin-Store.

    Display Spoiler

    — ¡Carajo! —gritó

    Amaranta, que empezaba a meter la ropa en el baúl, creyó que la había picado un alacrán.

    — ¿Dónde está? —preguntó alarmada.

    —¿Qué?

    — ¡El animal!

    Úrsula se puso un dedo en el corazón.

    — Aquí —dijo.

    ♪Quiero robarle los minutos a las horas pa' que mis padres nunca se me pongan viejos...♫

  • 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;
    }
  • 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
     
  • Thanks @GTB, I'm not sure where I should add the

    HTML
     


    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;
    
    
    
    
    }

    My styles and plugins in the Plugin-Store.

    Display Spoiler

    — ¡Carajo! —gritó

    Amaranta, que empezaba a meter la ropa en el baúl, creyó que la había picado un alacrán.

    — ¿Dónde está? —preguntó alarmada.

    —¿Qué?

    — ¡El animal!

    Úrsula se puso un dedo en el corazón.

    — Aquí —dijo.

    ♪Quiero robarle los minutos a las horas pa' que mis padres nunca se me pongan viejos...♫

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!