Add icons to prefixes

[King]

In some cases, adding icons to labels makes them more intuitive, let's see how to add them!

Full code:

Code:

.label.label--PrefixName {
    background: #df9a6a;
    color: #fff;
    border-radius: 6px;
    border: 2px solid #bf8d6c;
   
    &:hover {
        background: #938a7b;
        color: #fff;
        border: 2px solid #666361;
    }
    &:before {
        .m-faBase();
        .m-faContent(@fa-var-text);
    font-weight: 400;
    color: #fff;
    }
}

With this code you can have a prefix like the one in the example, add or modify the css to customize it

Prefix example​	Prefix example when we hover​
1. Here we modify the appearance of the prefix and name​	2. Here we modify the appearance of the prefix when we hover
Code: .label.label--PrefixName { background: #df9a6a; color: #fff; border-radius: 6px; border: 2px solid #bf8d6c;	Code: &:hover { background: #938a7b; color: #fff; border: 2px solid #666361; }
3. And here we modify and add the awesome font code. Leaving the start @fa-var-	4.When you finish, in your label you have to paste the code with the name​
Code: &:before { .m-faBase(); .m-faContent(@fa-var-text); padding-right: 5px; font-weight: 400; color: #fff; } }

Continue reading...