发表新帖
发表新帖

Unicode character for “X” cancel / close?

前端 未结
关注
17 1929
我在风中等你
我在风中等你 2021-01-29 17:18

I want to create a close button using CSS only.

I\'m sure I\'m not the first to do this, so does anyone know which font has an \'x\' the same width as height, so that it

相关标签:
17条回答
  • 走了就别回头了
    2021-01-29 17:59

    Using modern browsers you can rotate a + sign:

    .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);
}

    then simply place the following html where you need:

     <span class='popupClose'></span>
    0 讨论(0)
  • 渐次进展
    2021-01-29 18:05

    Forget about a font and use a background image!

    <!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>

    This will be more accessible for users visiting the page with a screen reader.

    0 讨论(0)
  • 无人及你
    2021-01-29 18:06

    HTML

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

    ✗ &#x2717;
    ✘ &#x2718;

    × &#x00d7; &times;

    CSS

    If you want to use the above characters from CSS (like i.e: in an :before or :after pseudo) simply use the escaped \ Unicode HEX value, like for example:

    [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" role="img" aria-label="Cancel"></i>
<i class="ico-check" role="img" aria-label="Accept"></i>

    Use examples for different languages:

    • &#x2715; HTML
    • '\2715' CSS like i.e: .clear:before { content: '\2715'; }
    • '\u2715' JavaScript string

    https://home.unicode.org/

    0 讨论(0)
  • 北荒
    2021-01-29 18:08

    ✖ works really well. The HTML code is &#10006;.

    An alternative is &#x2715: ✕

    0 讨论(0)
  • 花落未央
    2021-01-29 18:08

    &times; and font-family: Garamond, "Apple Garamond"; make it good enough. Garamond font is thin and web safe

    proper close X

    0 讨论(0)
 看不清?
提交回复
热议问题