Чи існує сутність HTML для піктограми інформації?

79

Я шукаю піктограму основної інформації, як це:

html unicode html-entities

Трохи запізнився з відповіддю, але ви можете скористатися Font-Awesome, є багато значків. fortawesome.github.io/Font-Awesome ви б просто позначили свій css фа-інформаційним колом

— Пол Леджер

147

Після ще кількох пошуків я сам знайшов цю сутність. Код для нього такий ⓘ, і він виглядає так: ⓘ

— Алексамостиль
джерело

1

Цей персонаж з'являється для мене в OS X 10.11 під управлінням Chrome. У той час як він показує вгору, ви можете зіткнутися з деякими проблемами доступності по порівнянні з @ Biffen у відповідь: stackoverflow.com/a/33878646/4556503

— Hopkins-матовий

2

@ hopkins-matt - я бачу персонажа у цій відповіді, але у Windows / Firefox у 2017 році я все ще не бачу персонажа у відповіді Біффен ... (?)

— Код жокей

11

🛈 ℹі ⓘHTML-сутності дадуть вам інформаційні кнопки.

— mgalic

1

Тільки & # 8505; та & # 9432; відображатиметься правильно на iphone та ipad. Перший - світло-блакитний округлий квадрат з білим «i» посередині.

— Джон Хенкель,

2

@JohnHenckel, можете, будь ласка, розповісти, як швидко & # 9432 використовувати код для рядка.

— Khushboo Dhote

37

Там 🛈 (U + 1F6C8, КРУГЛО ІНФОРМАЦІЙНЕ ДЖЕРЕЛО). В якості HTML суті: 🛈.

^{Існує безліч інструментів, багато в Інтернеті, які дозволяють шукати та отримувати більше інформації про символи Unicode. Мій особистий улюблений - це один .}

— Біффен
джерело

5

Цей символ не з'являється для мене в OS X 10.11 під управлінням Chrome, але я б сказав, що цей символ є семантично більш доречним.

— hopkins-matt

2

@ hopkins-matt Hm, це ганьба. Якщо хтось хоче його використовувати, можна вказати шрифт, який його містить. Що стосується більшості символів, що не належать до ASCII, якщо хочеться бути в безпеці.

— Біффен

Я згоден. Я впевнений, що це просто питання вибору шрифту.

— hopkins-matt

Досі не відображається у Firefox 2020. Потрібна додаткова конфігурація шрифтів.

— NVRM

1

Використання в CSS: p::before { content: "\1f6c8"; }мені це потрібно було. Тільки тестування в Chrome на Win10, до речі.

— Ніл Гай Ліндберг,

1

це може вам допомогти, використовуючи 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>

Розгорніть фрагмент

— JHM16
джерело

1

ЮНІКОД U+02139

ШІСТИНЯТНИК ℹ

HTML-КОД ℹ

КОД CSS \2139

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

HTML Example

<span>&#8505;</span>

Розгорніть фрагмент

Джерело

— Міле Міятович
джерело