How to add border color to an html character using css?

Issue

I am currently tasked to create checks inside of a pandas DataFrame table of different colors when certain data is showing.

I was able to find the following:

<p>I will display <span style="color:green">&#10004;</span></p>
<p>I will display <span style="color:yellow">&#x2714;</span></p>

While this works per se ... It would be nice to have them bigger if possible, or at least a border around the check itself (not a box around it).

Clearly this is not the way to go since it's an ASCII character, so curious if anyone had found a similar need. Google only returns checkbox information, not a check.

Solution

Just use text-shadow to add a border around your tick-mark icon. Also, you can further improve readability by increasing the size of the icons.

---

Check the Code Snippet below for a practical example of using text-shadow and increasing the icon size:

    p:nth-child(1) span {color:green; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; font-size: 50px;}

    p:nth-child(2) span {color:yellow; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;}

<p>I will display <span>&#10004;</span></p>
<p>I will display <span>&#x2714;</span></p>

Answered By - AndrewL64