Как добавить цвет границы для символа html, используя css?

Question

В настоящее время мне поручено создавать проверки внутри таблицы DataFrame панд разных цветов, когда отображаются определенные данные.

Мне удалось найти следующее:

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

Хотя это работает само по себе ... Было бы неплохо иметь их больше, если это возможно, или хотя бы границу вокруг самого чека (а не вокруг него).

Ясно, что это не тот путь, так как это ASCII-символ, поэтому любопытно, если бы кто-нибудь обнаружил аналогичную потребность. Google возвращает только информацию о флажках, а не проверку.

Answer 1

Подход с лучшей возможностью повторного использования заключается в создании галочки с помощью класса CSS для псевдоэлемента ::before или ::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>

Answer 2

Просто используйте text-shadow, чтобы добавить рамку вокруг значка галочки. Кроме того, вы можете улучшить читабельность, увеличив размер значков значков.

---

Проверьте приведенный ниже фрагмент кода для практического примера использования text-shadow и увеличения размера значка:

    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>

Answer 3

Вы можете создать прямоугольник по границе и изменить размер шрифта, как это сделано во фрагменте.

Другим вариантом является поиск Google по ключевым словам флажок fafa icon или 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>