[Codrin1]

Hello,

Hope you’re well

I have a query in relation to the icons from My account. I’ve managed to change them using CSS but they’ve only changed on desktop (https://prnt.sc/q98trq) and are still the same ones on mobile (https://prnt.sc/q98tw4).

Could you please help me out to change them on mobile as well?

Appreciate your help with this

Thanks,

[Althemist]

Hello Codrin1,

these are set from the same place. Most probably you’d need to clear your mobile phone’s cache.

Regards,
Dimitar

[Codrin1]

Hi Dimitar,

Thank you for getting back to me

I’ve tried to clear the cache but no luck, it seems that the CSS is not working on mobile devices. Is there anything you might know that could fix this? Any idea would be much appreciated

Regards,
Codrin

[Althemist]

Could you, please show us the code you used to change the icons?

[Codrin1]

Hi @Dimitar,

These are the codes that I’ve used to change the icons for ‘Payment method’, ‘Invite a friend’, ‘Logout’

/**
* changing the icon for Payment Methods in my account for users
*/

#rigid-account-holder.rigid-user-is-logged .rigid-header-account-link-holder > ul li.woocommerce-MyAccount-navigation-link--payment-methods a:before {
	content: '\f09d';
} 

/**
* Change icon for Invite a friend in My Account when user is logged in
*/

#rigid-account-holder.rigid-user-is-logged .rigid-header-account-link-holder > ul li.woocommerce-MyAccount-navigation-link--myreferrals a:before {
	content: '\f234' !important;
} 

/**
* Change icon for Logout in My Account when user is logged in
*/

#rigid-account-holder.rigid-user-is-logged .rigid-header-account-link-holder > ul li.woocommerce-MyAccount-navigation-link--customer-logout a:before {
	content: '\f00d';
} 

Looking forward to hearing back from you in regards to this issue

Kind regards,

[Althemist]

Looks like you only copied the class for the header account and deleted the mobile account section code.

e.g. – For the Dashboard link the class would be:

#rigid-account-holder.rigid-user-is-logged .rigid-header-account-link-holder > ul li.woocommerce-MyAccount-navigation-link--dashboard a::before, #rigid_mobile_account_tab li.woocommerce-MyAccount-navigation-link--dashboard a::before {
    content: "\f2bb";
}

Note the last part:

#rigid_mobile_account_tab li.woocommerce-MyAccount-navigation-link--dashboard a::before

Same goes for all other links. You’d need to add the class for the mobile menu too. e.g. – for the logout it must be like this:

#rigid-account-holder.rigid-user-is-logged .rigid-header-account-link-holder > ul li.woocommerce-MyAccount-navigation-link--customer-logout a:before, #rigid_mobile_account_tab li.woocommerce-MyAccount-navigation-link--customer-logout a::before {
	content: '\f00d';
}

Hope this helps.

[Codrin1]

Hi Dimitar,

You’re so right, I’ve done as you suggested and solved the issue on mobile

Thanks very much for your help!

Regards,

[Author]

Posts