Creating custom prefix styling

[Paul B]

The colours in the ACP are hard coded.

 

[beerForo]

So the 3rd value is supposed to change the border color but mine never changes. any idea?

 

[beerForo]

Great tutorial, thanks!

How you would do this code if you wanted the icon to the right of the text with the 4px in between text and icon and normal padding at the ends? Thanks for any help.

Your code:

/* #### Thread Prefixes #### */
.label
{
    &:before
    {
        padding-right: 4px;
        .m-faBase();
    }

    &.label--
    {
        &ctaAttention:before
        {
            .m-faContent(@fa-var-exclamation-triangle);
        }

        &ctaAnnouncement:before
        {
            .m-faContent(@fa-var-bullhorn);
        }

        &ctaNotice:before
        {
            .m-faContent(@fa-var-flag);
        }

        &ctaPoll:before
        {
            .m-faContent(@fa-var-poll-h);
        }
    }
}

 

[Jeremy P]

You can probably just change :before to :after and change padding-right to padding-left. You also don't need .m-faBase() in 2.3+.

 

[beerForo]

You can probably just change :before to :after and change padding-right to padding-left. You also don't need .m-faBase() in 2.3+.

That's exactly what I tried but for some reason it adds padding to both sides of the icon. To test it I add a large number like 50px and it shows on both sides of the FA.

 

[Jeremy P]

Oh, maybe try margin instead of padding.

 

[beerForo]

You're a genius, thank you!

 

[PhineasD]

How can create prefixes like this? Thx