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

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



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

616   15  

15 ответов:

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

464  
2012-02-11 18:34:03

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

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

71  
2012-02-08 07:03:01

× × или × (то же самое) 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>
54  
2015-10-20 18:14:11

вот также некоторые полезные

HTML

✕ &#x2715;✓ &#x2713;
✖ &#x2716;✔ &#x2714;

✗ &#x2717;
✘ &#x2718;

× &#xd7;&times;

CSS

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

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


.ico-times:before{ content: "16"; }
.ico-check:before{ content: "14"; }
<i class="ico-times"></i>
<i class="ico-check"></i>
27  
2017-06-24 02:55:00

✕ еще один большой, который не слишком толстый. Код HTML &#10005; или 2715 в hex.

20  
2016-01-12 23:33:16

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

<button class="close">&times;</button>
19  
2013-11-19 18:59:08

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

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

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

скрипку здесь

6  
2014-04-27 01:22:17

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

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

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

5  
2016-03-28 15:27:29

&times; и font-family: Garamond, "Apple Garamond"; сделать это достаточно хорошо. Garamond шрифт тонкий и веб-сейф

proper close X

4  
2017-02-25 15:55:03

Это прекрасно работает для меня:

<style>
a.closeX {
    position: absolute;
    right: 0px; top: 0px; width:20px;
    background-color: #FFF; color: black;
    margin-top:-15px; margin-right:-15px; border-radius: 20px;
    padding-left: 3px; padding-top: 1px;
    cursor:pointer; z-index: -1;
    font-size:16px; font-weight:bold;
}
</style>
<div id="content">
    <a class="closeX" id="closeX" onclick='$("#content").hide();'>&#10006;</a>
    Click "X" to close this box
</div>
3  
2012-07-22 22:48:23

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

&#x2573; or decimal: &#9587;
3  
2016-11-28 16:49:42

забудьте о шрифте и используйте фоновое изображение!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
    <head>
        <title>Select :after pseudo class/element</title>
        <style type="text/css">
            .close {
                background:url(http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/images/ui-icons_222222_256x240.png) NO-REPEAT -96px -128px;
                text-indent:-10000px;
                width:20px;
                height:20px;
            }
        </style>
    </head>
    <body>
        <input type="button" class="close" value="Close" />
        <button class="close">Close</button>
    </body>
</html>

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

2  
2015-06-13 09:00:49

это для людей, которые хотят сделать свой X малый/большой и красный!

HTML:

<div class="col-sm-2"> <span><div class="red-x">&#10006;</div></span>
    <p>close</p>
</div>

<div class="red-x big-x">&#10006;</div>

CSS:

.red-x {
color: red;
}

.big-x {
font-size: 70px;
text-align: center;
}
1  
2015-11-22 05:00:02

вы можете использовать текст, который доступен только для чтения с экрана, поместив его в промежуток, который вы скрываете доступным способом. Поместите x в CSS, который не может быть прочитан читателями экрана, при этом не будет путать, но виден на странице, а также доступен пользователям клавиатуры.

<style>
.hidden {opacity:0; position:absolute; width:0;}
.close {padding:4px 8px; border:1px solid #000; background-color:#fff; cursor:pointer;}
.close:before {content:'d7'; color:red; font-size:2em;}
</style>

<button class="close"><span class="hidden">close</span></button>
1  
2017-04-22 20:39:41

С помощью современных браузеров вы можете повернуть знак+:

.popupClose:before {
    content:'+';
}
.popupClose {
    position:relative;
    float:right;
    right:10px;
    top:0px;
    padding:2px;
    cursor:pointer;
    margin:2px;
    color:grey;
    font-size:32pt;
    transform:rotate(45deg);
}

затем просто поместите следующий html, где вам нужно:

 <span class='popupClose'></span>
1  
2017-09-11 15:41:50

Comments

    Ничего не найдено.
Click here to cancel reply.