how to change the font awesome icon

We have moved to a support ticketing system and our forums are now closed.

Open Support Ticket

Tagged: Icons

Author

Posts
December 29, 2017 at 10:18 pm #410881

Kathy Geisler
Lifetime Member

Post count: 313

From the developer:

Can you please advise us how to change the ‘font awesome’ icons? We have attempted to make some changes, but ended up having issues because it seems to be pulling the CSS from another location. Please tell us the best method for switching them, as adding basic CSS changes of the font awesome ID numbers to the CSS script in Geodirectory isn’t working out the way that we want.

Please note, we need to do these changes ourselves.

Thank you!!

December 29, 2017 at 11:57 pm #410897

Guust
Moderator

Post count: 29970

It all depends which ones you want to change exactly.
If they are icons used for the custom fields, have a look at the settings of the fields:

December 30, 2017 at 8:34 pm #410986

Kathy Geisler
Lifetime Member

Post count: 313

This reply has been marked as private.

December 30, 2017 at 11:29 pm #410993
Guust
Moderator

Post count: 29970
To change the cog wheel:
```
.fa-cog:after {font-family: FontAwesome;
content: "\f1b9"; color:white; font-size: 16px;}
.fa-cog {color:transparent; font-size: 0}
```
To change the search icon:
```
.fa-search:after {font-family: FontAwesome;
content: "\f1b9"; color:white; font-size: 16px;}
.fa-search {color:transparent; font-size: 0}
```
Adjust as required.
To find the correct icon code, see http://fontawesome.io/cheatsheet/
February 11, 2018 at 10:42 pm #417133

David Sirius
Expired Member

Post count: 163

I was looking for the same, i.e. replacing the cogwheel with another font awesome icon. The solution with the pseudo element worked but initially had the icon set-off to the right. Make sure you set font-size to !important!
Author

Posts