是否有一个信息图标的 HTML 实体？

小开

最佳答案

After some more searching, I myself have found the entity. The code for it is ⓘ, and it looks like this: ⓘ

小开

There's 🛈 (U+1F6C8, CIRCLED INFORMATION SOURCE). As an HTML entity: 🛈.

^{There are plenty of tools, many online, that let you search for, and get more information about, Unicode characters. My personal favourite is this one.}

小开

this may help you , using html and css we can achieve this results

<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}


.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;


/* Position the tooltip */
position: absolute;
z-index: 1;
}


.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">




<div class="tooltip">&#x1F6C8;
<span class="tooltiptext">Tooltip text</span>
</div>






</body>
</html>

小开

UNICODE U+02139

HEX CODE ℹ

HTML CODE ℹ

CSS CODE \2139

// css example
span {
content: "\2139";
}

HTML Example


<span>&#8505;</span>

Source

小开

Use the unicode: ⓘ into the HTML.

小开

These days I use emoji for "info" ℹ️ or "documentation" 📄 or "source" 📚

Previously, I would put the ⓘ inside superscript ^ⓘ because it reflects that it is a footnote to the text.

<sup>ⓘ</sup>

Also, consider the ☰ symbol over the 🛈 as it respects the baseline.

小开

HTML Code: ℹ

CSS Code: \2139

小开

Use tailwind CSS (https://tailwindcss.com/) then the code below will create a nice info button.

<div class="flex items-center justify-center italic
text-stone-500 cursor-default w-5 h-5
rounded-full border border-gray-500 bg-green-100">
i
</div>