Replace add to cart text on mobile with icon

Hi there,

you could do something like this:

@media(max-width: 769px) {
    .woocommerce .inside-add-to-cart-panel button.button.alt {
        font-size: 0;
    }

    .woocommerce .inside-add-to-cart-panel button.button.alt:before {
        content: url('url_to_icon_image');
        font-size: 16px;
    }
}

Simply update the url_to_icon_image - note the image cannot be styled eg. resized when using the content property - so the original image needs to be the exact size you require.

Hi david,

Can we use icons from font awesome? This icons should have the right size.

Content: '\f217'; Does not work.

Cheers

Update:

I was able to fix it. I have also to use the css propertie: font-family: "Font Awesome 5 Free";

Thanks :)

Glad to hear you got that resolved :)

Hello David,

We just noticed that on some devices the icon is not shown. https://ibb.co/y0mdJQt

Do I forget something here?

@media(max-width: 769px) {
    .woocommerce .inside-add-to-cart-panel button.button.alt {
        font-size: 0;
    }
}

    .woocommerce .inside-add-to-cart-panel button.button.alt:before {
        content: '\f217';
	font-family: "Font Awesome 5 Free";
        font-size: 16px;
    }
}

Tough to tell without seeing the site in question but looks like you might have some extra brackets in your CSS?

Try comparing your CSS with David CSS here:
https://generatepress.com/forums/topic/replace-add-to-cart-text-on-mobile-with-icon/#post-1478165

Hello Leo,

The difference is taht we use a font awesome icon instead of a url content: url('url_to_icon_image');.

Or what do you mean? :)

Cheers

Try increasing the media query size from 769px to 828px ( or greater ) some of the newer iphones have a higher resolution.