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

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

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

@ 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

🛈 ℹund ⓘHTML-Entitäten geben Ihnen Info-Schaltflächen.

— mgalic

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

@ JohnHenckel Kannst du bitte sagen, wie man & # 9432 Code schnell für die Zeichenfolge verwendet?

— Khushboo Dhote

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

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

@ 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

Verwendung in CSS: Das habe p::before { content: "\1f6c8"; }ich gebraucht. Nur in Chrome unter Win10 testen, übrigens.

— Neil Guy Lindberg

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