This article shows how to add text to the icon on the property cards. In the future we will add this option to core functionalities (it is waiting on our todo list)
1. Add any icon e.g. Lot size >> Area icon
2. You can check "Display on the property cards" option
3. Save field
4. New icon will be available on the card
5. Click right mouse button on the icon and check its code e.g. via Google Chrome -> Inspect
6. You will see the icon code
There are 2 possible examples:
A. Flaticon - in this case name is flaticon-xxxxx e.g. flaticon-area
to modify it please use this CSS:
.flaticon-area:after {
content: 'Text:'!important;
font-family: 'Lato'!important;
margin-left: 1px!important;
font-weight: 700!important;
}
Final effect:
B. Font Awesome - code is fa-xxxx e.g. fa-bad (ignore first "fa")
To modify this example please use this CSS:
.fa-bed:after {
content: 'Text:'!important;
font-family: "Lato"!important;
margin-left: 5px!important;
font-weight: 700!important;
}
It will look like this:
Margin-left controls how far the text is from the icon.