Какой шрифт для CSS кнопки «x» закрыть? - PullRequest
Новая
       52

Какой шрифт для CSS кнопки «x» закрыть?

204 голосов
/ 18 марта 2011

Я хочу создать кнопку закрытия, используя только CSS.

Я уверен, что я не первый, кто делает это, поэтому кто-нибудь знает, какой шрифт имеет 'x' такой же ширины, как высота, так что его можно использовать кросс-браузер, чтобы выглядеть как кнопка закрытия?

Ответы [ 16 ]

484 голосов
/ 09 февраля 2012

✖ работает очень хорошо. HTML-код ✖.

72 голосов
/ 18 марта 2011

Как насчет использования метки × (символа умножения), × в HTML, для этого?

"x" (буква) не должна использоваться для представления чего-либо другого, кроме буквы X.

57 голосов
/ 27 июня 2014

× × или × (тоже самое) U + 00D7 знак умножения

× тот же символ с сильным весом шрифта

⨯ ⨯ U + 2A2F Гиббсовский продукт

✖ ✖ U + 2716 знак тяжелого умножения

Также есть смайлики, если вы поддерживаете это. Если нет, вы просто видели квадрат = ❌

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

<ul>
  <li class="ele">
    <div class="x large"><b></b><b></b><b></b><b></b></div>
    <div class="x spin large"><b></b><b></b><b></b><b></b></div>
    <div class="x spin large slow"><b></b><b></b><b></b><b></b></div>
    <div class="x flop large"><b></b><b></b><b></b><b></b></div>
    <div class="x t large"><b></b><b></b><b></b><b></b></div>
    <div class="x shift large"><b></b><b></b><b></b><b></b></div>
  </li>
  <li class="ele">
    <div class="x medium"><b></b><b></b><b></b><b></b></div>
    <div class="x spin medium"><b></b><b></b><b></b><b></b></div>
    <div class="x spin medium slow"><b></b><b></b><b></b><b></b></div>
    <div class="x flop medium"><b></b><b></b><b></b><b></b></div>
    <div class="x t medium"><b></b><b></b><b></b><b></b></div>
    <div class="x shift medium"><b></b><b></b><b></b><b></b></div>

  </li>
  <li class="ele">
    <div class="x small"><b></b><b></b><b></b><b></b></div>
    <div class="x spin small"><b></b><b></b><b></b><b></b></div>
    <div class="x spin small slow"><b></b><b></b><b></b><b></b></div>
    <div class="x flop small"><b></b><b></b><b></b><b></b></div>
    <div class="x t small"><b></b><b></b><b></b><b></b></div>
    <div class="x shift small"><b></b><b></b><b></b><b></b></div>
    <div class="x small grow"><b></b><b></b><b></b><b></b></div>

  </li>
  <li class="ele">
    <div class="x switch"><b></b><b></b><b></b><b></b></div>
  </li>
</ul>
34 голосов
/ 24 июня 2017

HTML

& # x2715; &#x2715; & # x2713; &#x2713;
& # X2716; &#x2716; & # x2714; &#x2714;

& # x2717; &#x2717;
& # X2718; &#x2718;

& раз; &#x00d7; &times;

CSS

Если вы хотите использовать вышеупомянутые символы из CSS (например, в псевдо :before или :after), просто используйте экранированное значение \ Unicode HEX, как, например: 

[class^="ico-"], [class*=" ico-"]{
  font: normal 1em/1 Arial, sans-serif;
  display: inline-block;
}


.ico-times:before{ content: "\2716"; }
.ico-check:before{ content: "\2714"; }
<i class="ico-times"></i>
<i class="ico-check"></i>

Использовать примеры для разных языков :

  • &#x2715; HTML
  • '\2715' CSS как например: .clear:before { content: '\2715'; }
  • '\u2715' JavaScript string
21 голосов
/ 13 января 2016

✕ еще один замечательный, не слишком толстый.HTML-код &#10005; или 2715 в шестнадцатеричном формате.

19 голосов
/ 29 марта 2013

Как отметил @Haza, можно использовать символ времени. Twitter Bootstrap отображает это на значок закрытия для отклонения контента, такого как модалы и оповещения. 

<button class="close">&times;</button>
6 голосов
/ 27 апреля 2014

Я предпочитаю Font Awesome: http://fortawesome.github.io/Font-Awesome/icons/

Значок, который вы ищете, - fa-times.Это так же просто, как это использовать: 

<button><i class="fa fa-times"></i> Close</button>

Fiddle здесь

5 голосов
/ 28 ноября 2016

есть еще один, не упомянутый здесь - хороший тонкий - если вам нужен такой вид для вашего проекта: 100 

&#x2573; or decimal: &#9587;
5 голосов
/ 28 марта 2016

Это, вероятно, педантизм, но до сих пор никто не дал решения "создать кнопку закрытия только с помощью CSS". только. Вот, пожалуйста: 

#close:before {
  content: "✖";
  border: 1px solid gray;
  background-color:#eee;
  padding:0.5em;
  cursor: pointer;
}

http://codepen.io/anon/pen/VaWqYg

4 голосов
/ 28 января 2015

&times; и font-family: Garamond, "Apple Garamond"; делают его достаточно хорошим.Шрифт Garamond тонкий и безопасный для Интернета

proper close X

Страница:
...