Какой символ Юникода вы используете на своем веб-сайте? (вместо значков изображений)

Ответ 1

/fooobar.com/... используется для использования "●" (U + 25CF BLACK CIRCLE) для значков.

В Юникоде есть много полезных символов:

• ✆ U + 2706 ЗНАК МЕСТОПОЛОЖЕНИЯ ТЕЛЕФОНА
• ✉ U + 2709 ENVELOPE
• ☎ U + 260E ЧЕРНЫЙ ТЕЛЕФОН и ☏ U + 260F БЕЛЫЙ ТЕЛЕФОН
• ✎ U + 270E НИЖНЯЯ ПРАВИЛЬНАЯ ЧАСТЬ
• ⌛ U + 231B HOURGLASS
• ⌨ U + 2328 КЛАВИАТУРА

Ответ 2

Чтобы найти полезные символы, у меня есть два замечательных ресурса:

http://shapecatcher.com

Позволяет нарисовать фигуру, которую затем ищет символы юникода аналогичной формы.

https://www.fileformat.info/info/unicode/block/index.htm

Перечисляет Unicode по блокам символов (используя встроенный шрифт Unicode для максимальной совместимости для отображения) и имеет функцию "показ определенного блока с изображениями", которая позволяет просматривать блоки символов.

И то, и другое довольно полезно, хотя я часто заканчиваю тем, что использую shapecatcher в наши дни только потому, что это забавный перерыв, просто чтобы можно было нарисовать нужную форму и сделать так, чтобы сайт поднял ее для вас. По крайней мере, иногда это будет терпеть.

Разный Блоки символов

http://shapecatcher.com/unicode/block/Miscellaneous_Symbols_And_Pictographs также является отличной категорией символов Unicode, хотя, как и для всех Unicode, вам, возможно, придется проверить совместимость.

https://www.fileformat.info/info/unicode/block/miscellaneous_symbols/images.htm - это блок разных символов, для сравнения.

• ⌚ U + 0231A СМОТРЕТЬ
• ⌛ U + 0231B ПЕСОЧНЫЕ
• ♟ U + 265F ТВЕРДЫЕ ШАХМАТЫ
• ⚷ U + 26B7 ХИРОН
• ★ U + 2605 SOLID STAR
• ✓ U + 2713 ПРОВЕРЬТЕ МАРКУ
• ☑ U + 2611 КВАРТАЛЬНАЯ ПРОВЕРКА
• ✕ U + 2715 МУЛЬТИПЛИКАЦИЯ X
• ☒ U + 2612 КВАДРАТНЫЙ X-ED BOX
• ⚠ U + 26A0 ПРЕДУПРЕЖДАЮЩИЙ ЗНАК

Также хорошие символы для добавления в список.

Изменение: в 2019 году я бы порекомендовал использовать надежный пакет значков, либо в форме SVG, либо в форме файла шрифта, представление юникода часто менее контролируемо для веб-разработчиков.

Ответ 3

← ↑ → ↓ ↔ ↕ ↖ ↗ ↘ ↙

просто чтобы назвать несколько...

Ответ 4

Почему бы просто не перечитать весь список?

Ответ 5

Посмотрите http://unicode.org/charts#symbols для некоторых идей. Я не уверен, что будет работать для "проекта" или "нового сообщения", но есть много выбора.

Ответ 6

Я использовал блок-стрелки: U + 25b2 ▲, U + 25ba ►, U + 25bc ▼, U + 25c4 ◄

Ответ 7

Некоторые символы могут не поддерживаться шрифтом, выбранным на странице браузера. Даже если они есть, многие из них выглядят очень плохо при небольших размерах. Вам лучше использовать изображение, если сможете.

Ответ 8

http://unicode-table.com/ отлично, но для некоторых юникодов, предназначенных для значков веб-дизайна, я рекомендую: http://kudakurage.com/ligature_symbols/.

Ответ 9

Twitter Bootstrap использует & times; (×) для кнопок со стрелками.

Ответ 10

Я бы предложил использовать собственный шрифт, например https://github.com/FortAwesome/Font-Awesome

Вы также можете использовать версию svg/png https://github.com/encharm/Font-Awesome-SVG-PNG

Существуют и другие значки svg

• https://github.com/iconic/open-iconic
• https://github.com/outpunk/evil-icons
• Pure css icons https://github.com/saeedalipoor/icono

Для Material Design у вас есть статические значки svg https://google.github.io/material-design-icons/ и анимированные:

• http://tympanus.net/Development/AnimatedSVGIcons/
• http://tympanus.net/Development/IconHoverEffects/
• http://tympanus.net/Development/AnimatedCheckboxes/
• https://alexk111.github.io/SVG-Morpheus/

Ответ 11

Я удивлен, что никто не опубликовал Unicode emojis:

Диапазон U + 1F600 - U + 1F64F

Только некоторые из списка:

😁: U+1F601: GRINNING FACE WITH SMILING EYES &#128513
😂: U+1F602: FACE WITH TEARS OF JOY &#128514
😃: U+1F603: SMILING FACE WITH OPEN MOUTH &#128515
😄: U+1F604: SMILING FACE WITH OPEN MOUTH AND SMILING EYES &#128516
😅: U+1F605: SMILING FACE WITH OPEN MOUTH AND COLD SWEAT &#128517
😆: U+1F606: SMILING FACE WITH OPEN MOUTH AND TIGHTLY-CLOSED EYES &#128518
😷: U+1F637: FACE WITH MEDICAL MASK &#128567

Также ознакомьтесь с этим списком интересных значков из Дополнительный список

☣: U+2623: BIOHAZARD SIGN &#9763
☢: U+2622: RADIOACTIVE SIGN &#9762

Ответ 12

Я использовал значок увеличительного стекла в качестве тела якоря, чтобы связать его с интересной интерактивной страницей для некоторого анализа данных, который позволил пользователю соединить произвольные выборки данных, подобные этому пример.

 <a href="{{ url_for( 'interactiveParamExplorePage' ) }}" title="Explore merge column pairs.">&#x1F50E;</a>

В качестве ссылки подчеркивание подчеркивания по умолчанию несколько скрывало глифовый символ Юникода, но этот эффект был незначительным для нашего внутреннего инструмента, но может быть субоптимальным для чего-то публичного.