Я хочу создать кнопку закрытия, используя только CSS.
Я уверен, что я не первый, кто делает это, поэтому кто-нибудь знает, какой шрифт имеет 'x' такой же ширины, как высота, чтобы его можно было использовать в кросс-браузерном режиме, чтобы он выглядел как кнопка закрытия?
Lucida Sans Unicode
иArial Unicode MS
также поддерживаю такие символы Unicode. Если вы не используете шрифт, который поддерживает эти символы в некоторых браузерах (особенно в старых IE), все, что вы получите, это прямоугольники, указывающие на неподдерживаемые символы. Я использую урезанную версию DejaVu для таких символов.А как насчет использования для этого знака
×
HTML (символа умножения) в HTML?«x» (буква) не должна использоваться для обозначения чего-либо другого, кроме буквы X.
источник
×
×
или×
(то же самое) знак умножения U + 00D7× тот же персонаж с сильным весом шрифта
⨯
⨯
U + 2A2F продукт Гиббса✖
✖
U + 2716 знак тяжелого умноженияТакже есть смайлики, если вы поддерживаете это. Если нет, вы просто видели квадрат =
❌
Я также сделал этот простой пример кода на Codepen, когда работал с дизайнером, который попросил меня показать ей, как он будет выглядеть, когда я спросил, могу ли я заменить вашу кнопку закрытия кодированной версией, а не изображением.
источник
HTML
✕
✕
✓✓
✖
✖
✔✔
✗
✗
✘
✘
×
×
×
CSS
Если вы хотите использовать вышеуказанные символы из CSS (например, в:
:before
или:after
псевдо), просто используйте экранированное\
значение HEX Unicode, как, например:Используйте примеры для разных языков :
✕
HTML'\2715'
CSS как то есть:.clear:before { content: '\2715'; }
'\u2715'
Строка JavaScriptисточник
Another еще один замечательный, не слишком толстый. HTML-код
✕
, или2715
в шестнадцатеричном виде.источник
Как отметил @Haza, можно использовать символ времени. Twitter Bootstrap отображает это на значок закрытия для отклонения контента, такого как модалы и оповещения.
источник
Я предпочитаю Font Awesome: http://fortawesome.github.io/Font-Awesome/icons/
Значок, который вы ищете, это
fa-times
. Это так просто, чтобы использовать:Скрипка здесь
источник
Это, вероятно, педантичность, но до сих пор никто не дал решения «создать кнопку закрытия, используя только CSS». только. Ну вот:
http://codepen.io/anon/pen/VaWqYg
источник
есть еще один, не упомянутый здесь - хороший тонкий - если вам нужен такой вид вашего проекта: ╳
источник
×
иfont-family: Garamond, "Apple Garamond";
сделать это достаточно хорошо. Шрифт Garamond тонкий и безопасный для Интернетаисточник
Это хорошо работает для меня:
источник
Забудьте о шрифте и используйте фоновое изображение!
Это будет более доступно для пользователей, посещающих страницу с помощью программы чтения с экрана.
источник
Это для людей которые хотят сделать их
X
маленькими / большими и красными!HTML:
CSS:
источник
Вы можете использовать текст, который доступен только для программ чтения с экрана, поместив его в область, доступную скрытым способом. Поместите х в CSS, который не может быть прочитан программами чтения с экрана, поэтому он не будет сбивать с толку, но будет виден на странице, а также доступен для пользователей клавиатуры.
источник
Используя современные браузеры, вы можете вращать знак +:
Затем просто поместите следующий HTML-файл, где вам нужно:
источник
×
лучше, чем✖
как✖
странно ведет себя в Edge и Internet Explorer (протестировано в IE11). Это не получает правильный цвет и заменяется на «эмодзи»источник