如何使用CSS将边框颜色添加到html字符? [英] How to add border color to an html character using css?

问题描述

我目前的任务是在显示某些数据时在不同颜色的熊猫DataFrame表内创建检查.

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

我能够找到以下内容:

<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).

由于这是一个ASCII字符，显然这不是走的路，所以好奇是否有人发现了类似的需求. Google仅返回复选框信息，而不返回支票.

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.

推荐答案

只需使用text-shadow在刻度线图标周围添加边框.另外，您可以通过增加图标的大小来进一步提高可读性.

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

查看下面的代码段，以获取使用text-shadow并增加图标大小的实际示例:

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>

这篇关于如何使用CSS将边框颜色添加到html字符?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！