How to stop asterisk glyph displaying as an emoji on mobile?

I'm using an asterisk/star glyph on a clients website and it looks perfect on desktop and mobile through the squarespace preview, however when I test the site on a physical mobile device (specifically an iphone), the glyphs display as green emoji which is definitely not what I'm going for.

Is there a way to ensure these glyphs display correctly on mobile? 

Website: https://kabinettworks.squarespace.com/

Password: webtest

Thanks in advance!

You mean show this icon?

Hi @tuanphan,

Yes that's correct. That icon is displaying as a green emoji on apple mobile devices.

Any way to correct this?

On 9/4/2024 at 5:26 AM, seantattam said:

Hi @tuanphan,

Yes that's correct. That icon is displaying as a green emoji on apple mobile devices.

Any way to correct this?

You can add asterisk icon with FontAwesome icon, I think it will fix problem

First, add this line to Code Injection > Header (if the plan is Personal, you can add it via Code Block in Site Footer)

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />

Next, use this code to Custom CSS box

div#block-yui_3_17_2_1_1724036583559_32276 p, #block-a4bfb067a0a832d0f98e p, #block-53b046537dcc4e123f2b p, #block-1780edaed9b80f57e9ab p {
    display: flex;
    align-items: center;
}
div#block-yui_3_17_2_1_1724036583559_32276 p:before, #block-a4bfb067a0a832d0f98e p:before, #block-53b046537dcc4e123f2b p:before,#block-1780edaed9b80f57e9ab p:before {
    content: "\2a";
    font-family: "Font Awesome 6 Free";
    color: #9f7d19;
    font-size: 30px;
    font-weight: bold;
    margin-right: 20px;
}