Force text of arrow symbol (↗) for iOS

Hi!

I am trying to use the north-east arrow symbol in a text block ( ↗ ) and it works fine on my desktop but as soon as I use any iOS device (iPhone, iPad), it turns into some emoji ( ↗️ ). Is there a way to force text for this symbol?

Thank you for your help!

Can you share site url? I think you can use Squarespace Font Icon to achieve this.

https://endive-denim-89ds.squarespace.com/

The problem appears on the footer, the symbols are next to the Social Media "Instagram, Facebook" etc

@tuanphan any idea?

Has anyone ever found a solution for this? I'm facing exactly, the same problem. 

https://kloosterstraat23.squarespace.com. Desktop seems fine, iPad and iPhone look awful.

@tuanphan@TOMweb

7 hours ago, TimoBluntt said:

Has anyone ever found a solution for this? I'm facing exactly, the same problem. 

https://kloosterstraat23.squarespace.com. Desktop seems fine, iPad and iPhone look awful.

@tuanphan@TOMweb

You can choose an icon here, then we can give code to replace text block arrow symbol with icon there. This will work on all devices

https://fontawesome.com/icons/categories/arrows

(choose free version only)

Thanks so much for getting back on this! Much appreciated. 

We'll probably go with this one. 

https://fontawesome.com/icons/location-arrow?s=solid

18 hours ago, TimoBluntt said:

Thanks so much for getting back on this! Much appreciated. 

We'll probably go with this one. 

https://fontawesome.com/icons/location-arrow?s=solid

Add to Settings > Advanced > Code Injection > Header

 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous">
<style>
  div#block-280e6688c5968d09a8cd a:after {
    content: "\f124";
    font-family: "Font Awesome 5 Free";
}
</style>

If it doesn't work, please keep the code, we can check easier

Because I was only using the arrow symbol on paragraphs, I was able to prevent this by adding this to the custom CSS. No need to have an advanced code injection to do so, which is great if you are on the personal pricing plan. You'll need to replace the family font with the one you are using on your site and the component/s you are using the arrow in. But it works... 

p > a{
  font-family: 'Helvetica Neue', system-ui;
}