The following code is intended to print a red version of the Unicode character with HTML code ◼. It does this in Firefox, but it prints black in Edge. How can I amend the code so that it will print red, as desired, in both browsers?
<html>
<body>
<span style="color:#f00";>◼</span>
</body>
</html>
I opened the page in both Firefox and Edge.
Changing the span to
<span style="color:#f00;
font-family:Segoe UI Symbol">◼</span>
works, but is there a way to do it that doesn’t involve changing the font?
>Solution :
Your syntax is invalid, you must place the semi-colon within the double quotes. Additionally, the semi-colon is optional for the last style.
<span style="color: #f00;">◼</span>
<!-- ^ Either remove the semi-colon or place it inside the quotes -->
<span style="color: #f00; font-family: Segoe UI Symbol;">◼</span>
Edit: This works out of the box, without the need to change the font.
<span style="color: #f00;">◼</span>