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

user_10474024 0
Viewed 922

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.

pandas css-selectors css html
3 Answers

You can create a box by border and make the font-size change as done in the snippet.

Another option is you can Search google with keywords checkbox fafa icon or check icon fafa

<p>I will display <span style="border: 1px solid black;font-size: 50px;color:green">&#10004;</span></p>
<p>I will display <span style="color:yellow">&#x2714;</span></p>

user_61458330

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>

user_41149070

An approach with better reusability would be to create the checkmark via a CSS class on a pseudo element ::before or ::after:

.checkmark-before::before,
.checkmark-after::after {
  content: "✔";
  color: orange;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
}

.checkmark-before.x2::before,
.checkmark-after.x2::after {
  font-size: 2em;
}

.checkmark-before.bordered::before,
.checkmark-after.bordered::after {
  text-stroke: 1px #a00;
  -webkit-text-stroke: 1px #a00; 
  width: 1.2em;
}

.checkmark-before.yellow::before,
.checkmark-after.yellow::after {
  color: yellow;
}
<button class="checkmark-after" type="button">I will display </button>

<p class="checkmark-before x2"> Done!</p>

<a href="http://example.com" class="checkmark-after bordered"> Google</a>

<p  class="checkmark-before x2 checkmark-after yellow bordered">Combined!</p>

user_37443040
Related