I have unicodes for “globe” and “shopping trolley” symbols but they don’t seem to render black or greyscale, which I would prefer. Is there a way to change the colors or does someone have these symbols in black or greyscale for me?
Thanks!
Unicode characters will simply appear like the rest of your text. If you want to change the colour simply apply CSS, if necessary surrounding the character(s) in <span>...</span>.
1 Like
Like this:
<a href="http://www.cambabooks.com/paymentpageofbeyondthetrial.html" target="_blank"> <span style="color:black">🛒</span> Buy Now</a></li>
Then I guess I’m to specify the colour with css?
It hasn’t worked, what next?
Do you have a link to a live page demonstrating the issue?
The code you posted works fine for me, so there must be something else going on.
Hi TechnoBear, do you mean that you see the symbols in black? I’ve only changed them in my notepad and viewed with firefox browser. Could it be because it is not yet live that I can’t see the change in the colors?
I just pasted your line of code into an HTML document, viewed it in my browser, and the symbol appeared black - as did the rest of the text. I then changed style="color:black" to style=“color:red”` and the symbol turned red. That’s working as I expect.
Silly question, but did you remember to save the changed page before you tried viewing it? (I’ve made that mistake more than once. )
Not silly at all, I’m quite capable of anything! 
It is obviously something to do with not publishing the page yet? I will upload the change to my site when I’m satisfied and have also addressed a few other general things on the site. Publishing is so slow and tedious and I can’t afford to do it too many times. I will have to see.
Thanks very much for troubleshooting for me.
It shouldn’t be anything to do with that. It works for me on a local file. It’s more likely to be another rule interfering, but without seeing your code, I can’t offer much more help.
1 Like
Hey, here it is:
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
ul {
list-style: none;
padding: 0;
margin: 0;
}
.drop-nav li {
position: relative;
float: left;
}
.drop-nav li > ul {
position: absolute;
left:-999em;
width:100%;
top:0;
transition:top .5s ease;
}
.drop-nav ul ul {
transition:transform .5s ease, opacity .3s ease;
transform:translateX(0);
opacity:0;
}
.drop-nav a {
display: block;
background: #f3f3f3;
padding: 15px 25px 15px 25px;
text-decoration: none;
white-space: nowrap;
color: #666666;
border: 1px solid #fff;
line-height:1.2em;
}
.drop-nav a:hover {
background: #ccc;
}
.drop-nav li:hover > ul {
left:0;
top:100%;
}
.drop-nav li li:hover > ul {
left:0;
transform:translateX(100%);
top:0;
opacity:1;
}
.drop-nav ul li {
float: none;
}
.drop-nav li:hover > a {
background: #ccc;
}
</style>
</head>
<body>
<ul id="drop-nav" class="drop-nav">
<li><a href="#"><span style="color:black">🛒</span>Buy Now</a></li>
<li><a href="#"><span style="color:black">🌍</span>More Buying Options ▾</a>
<ul>
<li><a href="#" target="_new">Buy From Amazon</a></li>
<li><a href="#" target="_new">Buy From Amazon UK</a></li>
<li><a href="#" target="_new">Buy From Amazon FR</a>
<li><a href="#">Buy From Amazon IT ▸</a>
<ul>
<li><a href="#" target="_new">Book Title 1</a></li>
<li><a href="#" target="_new">Book Title 2</a></li>
<li><a href="#" target="_new">Book Title 3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
Doesn’t work for me.
As far as I understand it that shopping trolley is an emoji unicode and you can’t change color. It appears differently on different systems though.
You could change opacity to make it appear a little fainter but the color seems to be hard coded.
Probably better off with a font-awesome icon instead.
2 Likes
I’m still not seeing a problem with the colour; both icons appear black, as does the rest of the text. What colour are you seeing? (I say “both icons”, although only the globe displays correctly for me, but if I change the colour of the spans, they both respond as expected.)
Ah - I just assumed it wasn’t displaying for me because I’m using a less common default font on Firefox. The “broken” symbol was displaying correctly in the expected colours.
My apologies!
They appear to only work in Firefox. 
coothead
Only one out of two on my Firefox.
1 Like
That’s strange as they don’t change color in my Firefox but they will change color in IE11 but not edge.
IE11 shows a different right facing trolley with outline and no solid colours.
1 Like
They don’t change color in my Firefox either. 
I was just pointing out that they did not work at all, for me,
in my IE 11, Chrome, Opera, and Vivaldi browsers. 
coothead
2 Likes
Yes, the higher codepoint unicode glyphs can be hit or miss when it comes to browser support.
From what I could find, Font Awesome has 3 variations of “globe”. Instead of landform silhouettes they’re a simplified graticule.
It would be nice if there was a way to show the unicode with the font awesome as a fallback.
3 Likes
It must be system and browser dependent. I’m guessing that some of us have have the correct font installed for the icon to display.
For that reason it would be better to use another method to display those icons
2 Likes
They seem to be strange beasts then.
I use two Firefox browsers - ( Windows 7 OS ) …
-
Firefox Quantum 59.0b5(64-bit) portable - just for testing
-
Firefox 52.5.0 (64-bit) ESR - for browsing and testing
…and both displayed the trolley.
coothead
2 Likes