logo标签列表

有没有一个HTML实体表示信息图标？

htmlunicodehtml-entities
124
我正在寻找一个基本的信息图标，就像这样：

。
回答有点晚了，但你可以使用 Font-Awesome，它有很多图标。https://fortawesome.github.io/Font-Awesome/ 你只需要在 CSS 中标记 fa-info-circle 即可。 - Paul Ledger
8个回答
221
在进一步搜索后，我自己找到了该实体。它的代码是 ⓘ，并且看起来像这样：ⓘ
1
这个字符在我运行Chrome的OS X 10.11上出现了。虽然它确实显示出来了，但与@Biffen的答案相比，您可能会遇到一些无障碍问题：https://dev59.com/1VsX5IYBdhLWcg3wY-rX#33878646 - hopkins-matt
2
@hopkins-matt - 我可以在这个回答中看到这个字符，但是在Windows/Firefox上，在2017年，我仍然无法看到Biffen的回答中的字符... (?) - Code Jockey
14
🛈、ℹ 和 ⓘ 的 HTML 实体可以生成信息按钮。 - mgalic
4
只有符号 ℹ 和 ⓘ 能够在 iPhone 和 iPad 上正确显示。前者是一个浅蓝色的圆角正方形，中间有一个白色的字母“i”。 - John Henckel
2
@JohnHenckel，您能告诉我如何在Swift中使用&#9432代码来处理字符串吗？ - Khushboo Dhote
显示剩余3条评论
48

有个 (U+1F6C8, CIRCLED INFORMATION SOURCE)。作为HTML实体: 🛈。

有许多工具，很多是在线的，可以帮助你搜索并获取更多关于Unicode字符的信息。我个人最喜欢的是这个。

9
这个字符在我使用的 OS X 10.11 Chrome 浏览器中无法显示，但我认为这个字符在语义上更加合适。 - hopkins-matt
2
@hopkins-matt 嗯，那真是遗憾。如果有人想使用它，可能需要指定一个包含它的字体。对于大多数非ASCII字符而言，如果想要安全，这都是必须的。 - Biffen
我同意。我相信这只是字体选择的问题。 - hopkins-matt
仍未在Firefox 2020中显示。需要额外的字体配置。 - NVRM
1
在CSS中使用：p::before { content: "\1f6c8"; } 我需要这个。顺便说一下，我只是在Win10上的Chrome中测试。 - Neil Gaetano Lindberg
一个非常流畅的图标，非常感谢！ - Luan Cardoso
7

这可能对您有所帮助，使用HTML和CSS我们可以实现这些结果。

<!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>

5

UNICODE U+02139

十六进制编码 &#x2139;

HTML 编码 &#8505;

CSS 编码 \2139

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

<span>&#8505;</span>

Source

3

这些天我使用表情符号来表示“信息”ℹ️或“文档”或“源代码”。

以前，我会把ℹ️放在上标ⓘ中，因为它反映了它是文本的脚注。

<sup>&#9432;</sup>

另外，考虑使用☰符号代替ⓘ，因为它尊重基线。

2

HTML代码：&#8505;

CSS代码：\2139

enter image description here

1
将unicode编码：&#9432;插入HTML中。
0

使用Tailwind CSS（https://tailwindcss.com/），然后下面的代码将创建一个漂亮的信息按钮。

<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>
这对于一个简单的“信息”图标来说是不是过于繁琐或依赖性太高了？ - dvdmn
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接