Magnifying Glass as UTF-8-Sign #csstricks

01. January 2018
Category: HTML & CSS
html+css

The Integration of Fontawesome for one single sign may is not that useful. Hence I was looking for an alternative without using any external ressources.

If supported by the used font, the UTF-8-Emojis 🔍 and 🔎 where looking quite promising to me.

But the color and style of those "characters" is determined by the output device.  

magnifying glasses

Dyeing the emoji by using the CSS color property had no effect on Android. A possible workaround is:

text-shadow: 0 0 0 #fff;
color: transparent;

Update: It seems that this workaround is not supported by Firefox and Microsoft Edge running on Windows. Chrome is just working fine.