King
Administrator
- Joined
- Jul 12, 2021
- Messages
- 25,005
- Reaction score
- 5
- Points
- 38
In some cases, adding icons to labels makes them more intuitive, let's see how to add them!
Full code:
Code:
With this code you can have a prefix like the one in the example, add or modify the css to customize it
Continue reading...
Full code:
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:
Code:
| Code:
Code:
|
| 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:
Code:
|
|
Continue reading...