120

I am looking for a basic information icon like this:

Volker E.
  • 5,911
  • 11
  • 47
  • 64
Alexcamostyle
  • 3,623
  • 4
  • 14
  • 13
  • Bit late with an answer but you could use Font-Awesome, there is loads of icons with that. https://fortawesome.github.io/Font-Awesome/ you would just tag your css with fa-info-circle – Paul Ledger Feb 12 '16 at 11:25

7 Answers7

215

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

Alexcamostyle
  • 3,623
  • 4
  • 14
  • 13
  • 1
    This character appears for me on OS X 10.11 running Chrome. While it does show up, you may run into some accessibility issues compared to @Biffen's answer: http://stackoverflow.com/a/33878646/4556503 – hopkins-matt Nov 23 '15 at 19:08
  • 2
    @hopkins-matt - I can see the character in this answer, but on Windows/Firefox, in 2017, I still can't see the character in Biffen's answer... (?) – Code Jockey Jul 19 '17 at 19:48
  • 13
    `πŸ›ˆ` `β„Ή` and `β“˜` html entities will give you info buttons. – mgalic Oct 30 '17 at 11:49
  • 4
    Only β„Ή and β“˜ will show up correctly on iphone and ipad. The former is light blue rounded square with a white "i" in the middle. – John Henckel Oct 24 '18 at 15:18
  • 2
    @JohnHenckel can you please tell how to use β“˜ code in swift for the string. – Khushboo Dhote Nov 13 '18 at 09:37
  • @KhushbooDhote sorry, no, i'm not using swift. I am using vscode and running my app in safari – John Henckel Nov 14 '18 at 14:34
  • @KhushbooDhote I don't use Swift, but you should be able to just copy and paste the β“˜ from above (or my comment) into any string literal in Xcode. That's what I do for Objective-C++, as Xcode supports Unicode (as do pretty much all modern code editors). That way the characters appear more or less the same way in source code as they'll appear in the running app, instead of as some cryptic digits in the source code. – Arda Oct 04 '19 at 22:29
  • On macOS you can simply pull up the **Emoji & Symbols** pane from the Edit menu. In the top-right corner of the window is a button to show larger view, and from here you can look up emoji and symbols and the unicode hex by right-clicking on a symbol and choosing **Copy Character Information** – TimD Aug 17 '21 at 09:25
48

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.

Biffen
  • 6,249
  • 6
  • 28
  • 36
6

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>
JHM16
  • 649
  • 8
  • 12
4

UNICODE U+02139

HEX CODE &#x2139;

HTML CODE &#8505;

CSS CODE \2139

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

<span>&#8505;</span>

Source

Mile Mijatović
  • 2,948
  • 2
  • 22
  • 41
3

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>&#9432;</sup>

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

ow3n
  • 5,974
  • 4
  • 53
  • 51
2

HTML Code: &#8505;

CSS Code: \2139

enter image description here

Artyom Vancyan
  • 5,029
  • 3
  • 12
  • 34
1

Use the unicode: &#9432; into the HTML.

A. Silva
  • 11
  • 2