Jump to content

How to stop apple replacing a symbol with an emoji?

Recommended Posts

Posted

Hello!  I've just noticed that on apple mobile and tablet OS's the symbol I am using in my Scrolling Marquee header is changing to some horrendous emoji.  See the example below:

How it normally looks: image.png.90568764cb6884e7d6acdc70a0d9a10f.png

how it looks on apple devices (not desktop)

 image.jpeg.4df8c9052764becec453270849919150.jpeg

 

So, I believe I should be about to fix this with some CSS.  But what I've tried (and what I've asked ChatGPT for) doesn't seem to work.  

What I've tried is this:

 /* Prevent Apple devices from using Apple emojis for .Marquee */
.Marquee * {
    font-family: 'officially_funkyregular'
}

(Officially Funky is a custom font I've added.)

Do I need a .no-emoji { section to be added?  that doesn't seem to do anything either unless I'm doing it wrong....

Do I need to have code injection to fix this do you think?

Helpfully someone can help point me in the right direction 🙂

 

 

Posted

Thanks!  Yes so here is a good example: https://www.newtondesign.co/timmy-shot-me

You'll see on desktop computers, or android mobile devices the start in the scrolling header renders as it should. But when you look on an iOS device, apple swaps that for a horrible emoji! lol.

I've had a chat with a friend how says it's probably not possible to fix.  So it might very well be I need to just remove the star shape which will be a shame.

I've put in a request for the ability to add an image to the scrolling bar, then we can add our own custom symbols etc.

Posted
On 6/24/2024 at 9:28 PM, NewtonDesignCo said:

Thanks!  Yes so here is a good example: https://www.newtondesign.co/timmy-shot-me

You'll see on desktop computers, or android mobile devices the start in the scrolling header renders as it should. But when you look on an iOS device, apple swaps that for a horrible emoji! lol.

I've had a chat with a friend how says it's probably not possible to fix.  So it might very well be I need to just remove the star shape which will be a shame.

I've put in a request for the ability to add an image to the scrolling bar, then we can add our own custom symbols etc.

You can try this approach to add icon to Scrolling Block

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

  • 2 weeks later...
Posted

Alas this requires the business level of sub, so couldn't do that.  Ended up just replacing the symbol for another one. Not as nice, but at least apple doesn't change it to an emoji.

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.