Return to previous page

Replace old font awesome icons with new version ones 6.4.2 svg

This topic has 12 replies, 3 voices, and was last updated 7 months ago ago by Andrew Mitchell

fyshlas

Participant

April 13, 2024 at 05:43

Hello i am trying to replace some of the old fontawesome icons to their new versions and i cannot as unicode for new and old is the same and the old ones are displayed.

Please, contact administrator
for this information.

#391520 Copied Theme version: 6.3.9

11 Answers
Luca Rossi

Support staff

April 13, 2024 at 08:59
Hi @fyshlas,

You can try with this custom CSS:
```
i.et-icon.et-user-2 {
    background: url(https://icons.veryicon.com/png/o/internet--web/prejudice/user-128.png) no-repeat center center;
    background-size: 100%;
}
i.et-icon.et-user-2::before {
    opacity: 0;
}
```
Do the same as with the other icons.

Hope it helps!
#391550 Copied
fyshlas

Participant

April 13, 2024 at 10:14

Can you please tell me where these icon classes are stored?

Please contact administrator
for this information.

#391557 Copied

Luca Rossi

Support staff

April 13, 2024 at 10:39

Hi @fyshlas,

All the icon classes you can find in this file: /wp-content/themes/xstore/css/xstore-icons.css

From the code you gave me it means that i will have to change all classes of the elements/icons i want to use. Is there another way? just to call the these svgs in the classes already presented in the theme?

You don’t have to update all the icon classes, you just need to change the classes which you’re using on your website.

Best Regards,
The 8Theme Team.

#391562 Copied

fyshlas

Participant

April 13, 2024 at 10:55

I am using royal theme and there is no folder shortcodes in css

#391564 Copied
Luca Rossi

Support staff

April 13, 2024 at 11:35
Hi @fyshlas,

Sorry for the confusion!

The Royal theme is using the FontAwesome icons, so you can look into this file: wp-content/themes/royal/css/font-awesome.min.css

The custom CSS codes would be:
```
i.fa.fa-map-marker {
    background: url(https://icons.veryicon.com/png/o/internet--web/prejudice/user-128.png) no-repeat center center;
    background-size: 100%;
}
i.fa.fa-map-marker::before {
    opacity: 0;
}
```
Best Regards,
The 8Theme Team.
#391566 Copied
fyshlas

Participant

April 13, 2024 at 12:09

No worries but its still not working for me

Please contact administrator
for this information.

#391569 Copied
Luca Rossi

Support staff

April 14, 2024 at 05:58
Hi @fyshlas,

Did you mean these icons on the header?

If yes, please try with this custom CSS instead:
```
/* user icon */
.navbar-right li.login-link.lastItem.firstItem a, .navbar-right li.my-account-link.firstItem a {
    background: url(https://spyrosnicolaides.com/nutcracker/wp-content/uploads/2024/04/user-solid.svg) no-repeat 12px center;
    background-size: 15px;
}
.navbar-right li.login-link.lastItem.firstItem a:before, .navbar-right li.my-account-link.firstItem a:before {
    opacity: 0;
}
```
Let us know how it goes!
#391627 Copied
fyshlas

Participant

April 14, 2024 at 10:31

Thank you, the css did the trick but im facing issues with mobile version not displaying due to opacity 0 when hidding the previous icon from font awesome.

As these are the new version of font awesome is there a way to replace the version so this css is not needed and the icons are called automatically?

Please contact administrator
for this information.

#391650 Copied
Luca Rossi

Support staff

April 15, 2024 at 06:55
Hi @fyshlas,

We need to update the custom CSS codes a little bit to make it work on mobile:
```
/* user icon */
.navbar-right li.login-link.lastItem.firstItem a, .navbar-right li.my-account-link.firstItem a {
    background: url(https://spyrosnicolaides.com/nutcracker/wp-content/uploads/2024/04/user-solid.svg) no-repeat 12px center;
    background-size: 15px;
}
.navbar-right li.login-link.lastItem.firstItem a:before, .navbar-right li.my-account-link.firstItem a:before {
    opacity: 0;
}
@media (max-width: 480px){
    .navbar-right li.login-link.lastItem.firstItem a, .navbar-right li.my-account-link.firstItem a {
        display: block;
        background-position-x: left;
    }
}
```
For the menu icon, please add this custom CSS code:
```
.menu-icon::before {
    opacity: 0;
}
.menu-icon {
    background: url(https://spyrosnicolaides.com/nutcracker/wp-content/uploads/2024/04/user-solid.svg) no-repeat center center;
    background-size: 15px;
}
```
For the hover color, please take a look at this article: https://stackoverflow.com/questions/19777463/change-css-background-image-svg-paint-behavior-on-hover.

You have to swtich to the SVG inline.

Best Regards,
The 8Theme Team.
#391699 Copied
fyshlas

Participant

April 18, 2024 at 09:58

Thank you

#392093 Copied

Andrew Mitchell

Support staff

April 18, 2024 at 09:59

Dear fyshlas,

In the spirit of gratitude, we want to express our appreciation for your trust in our products. As a valued customer, your experience matters greatly. Would you consider sharing it by giving our theme a deserving 5-star rating on ThemeForest?

Click here to share your thoughts: https://themeforest.net/downloads

Being part of our community means a lot, and your feedback contributes immensely.

Best Regards,
The 8Theme Team

#392094 Copied
Tagged: font awesome icons, new version icons, replace old icons, svg 6.4.2 version, update icons, woocommerce wordpress templates, wordpress icon upgrade
Viewing 12 results - 1 through 12 (of 12 total)

The issue related to '‘Replace old font awesome icons with new version ones 6.4.2 svg’' has been successfully resolved, and the topic is now closed for further responses

Replace old font awesome icons with new version ones 6.4.2 svg

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection