Ciao, ho verificato e anche sul mio samsung (sistema android) noto lo stesso problema.
Ho fatto qualche ricerca, non ho trovato documentazioni ufficiali ma qualcuno accenna al fatto che alcuni sistemi/browser possono renderizzare quei caratteri speciali come fossero emoji; cioè un genere di immagini trattate come testo ma a cui è possibile applicare le proprietà CSS in modo limitato rispetto al testo vero e proprio.

In particolare il problema lo hai sull'entità HTML ◼ usata nel tuo codice.

Non ho informazioni più precise a riguardo ma una soluzione può essere quella di usare un diverso carattere tra quelli "più standard", che sia comunque simile a quello che ti serve.

Puoi usare ad esempio questo ■ il cui codice numerico è ■

Da quel che ho provato non noto il problema che si ha con l'altro carattere.

Chiaramente ci possono essere tanti altri modi di risolvere, ad esempio impostare l'elemento in questione (nel tuo caso il tag <a>) con un po' di CSS in modo che sia rappresentato come un quadrato e applicare la proprietà background per colorarlo (anziché color). In questo caso però sarebbe più conveniente un uso meglio organizzato del CSS, cosa che nel tuo codice lascia il tempo che trova.

Oltre a questo, il tuo codice presenta diversi errori di markup: id duplicati, attributi HTML non validi; e altri errori concettuali, come l'uso di layout tabellare, l'uso di attributi presentazionali e, come già detto, di style in linea ridondante... ma questa è tutta un'altra storia


Fai sapere se risolvi. Buon proseguimento