Gibt es eine HTML-Entität für ein Info-Symbol?

76

Ich suche ein grundlegendes Informationssymbol wie dieses:

html unicode html-entities Alexcamostyle
quelle
Etwas spät mit einer Antwort, aber Sie könnten Font-Awesome verwenden, es gibt eine Menge Symbole damit. fortawesome.github.io/Font-Awesome Sie würden nur Ihre CSS mit fa-info-Kreis markieren
Paul Ledger

Antworten:

144

Nach einigen weiteren Suchen habe ich selbst die Entität gefunden. Der Code dafür lautet ⓘund sieht folgendermaßen aus: ⓘ

Alexcamostyle
quelle
1
Dieses Zeichen wird für mich unter OS X 10.11 mit Chrome angezeigt. Während es angezeigt wird, können einige Probleme mit der Barrierefreiheit auftreten, verglichen mit der Antwort von @ Biffen: stackoverflow.com/a/33878646/4556503
hopkins-matt
2
@ hopkins-matt - Ich kann den Charakter in dieser Antwort sehen, aber unter Windows / Firefox kann ich ihn 2017 in Biffen's Antwort immer noch nicht sehen ... (?)
Code Jockey
11
🛈 ℹund ⓘHTML-Entitäten geben Ihnen Info-Schaltflächen.
mgalic
1
Nur & # 8505; und & # 9432; wird auf dem iPhone und iPad korrekt angezeigt. Ersteres ist ein hellblaues, abgerundetes Quadrat mit einem weißen "i" in der Mitte.
John Henckel
2
@ JohnHenckel Kannst du bitte sagen, wie man & # 9432 Code schnell für die Zeichenfolge verwendet?
Khushboo Dhote
34

Es gibt 🛈 (U + 1F6C8, GEKREISTE INFORMATIONSQUELLE). Als HTML-Entität : 🛈.

Es gibt viele Online-Tools, mit denen Sie nach Unicode-Zeichen suchen und weitere Informationen zu diesen erhalten können. Mein persönlicher Favorit ist dieser .

Biffen
quelle
5
Dieses Zeichen wird für mich unter OS X 10.11 mit Chrome nicht angezeigt, aber ich würde sagen, dass dieses Zeichen semantisch besser geeignet ist.
Hopkins-Matt
2
@ Hopkins-Matt Hm, das ist eine Schande. Wenn man es verwenden möchte, möchte man möglicherweise eine Schriftart angeben, die es enthält. Das gilt für die meisten Nicht-ASCII-Zeichen, wenn man sicher sein will.
Biffen
Genau. Ich bin sicher, es ist einfach ein Problem der Wahl der Schriftart.
Hopkins-Matt
Wird in Firefox 2020 immer noch nicht angezeigt. Zusätzliche Schriftartenkonfiguration erforderlich.
NVRM
1
Verwendung in CSS: Das habe p::before { content: "\1f6c8"; }ich gebraucht. Nur in Chrome unter Win10 testen, übrigens.
Neil Guy Lindberg
0

Dies kann Ihnen helfen, mit HTML und CSS können wir diese Ergebnisse erzielen

<!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>
Erweitern Sie das Snippet

JHM16
quelle