Ký tự Unicode cho hủy X / hủy?

Tôi muốn tạo một nút đóng chỉ bằng CSS.

Tôi chắc chắn tôi không phải là người đầu tiên làm điều này, vậy có ai biết phông chữ nào có chiều rộng 'x' bằng chiều cao, để nó có thể được sử dụng trên nhiều trình duyệt để trông giống như một nút đóng không?

Hoạt động thực sự tốt. Mã HTML là ✖.

Còn về việc sử dụng dấu × (ký hiệu nhân), ×trong HTML thì sao?

"X" (chữ cái) không nên được sử dụng để thể hiện bất cứ điều gì khác ngoài chữ X.

× ×hoặc ×(cùng một thứ) Dấu nhân U + 00D7

× cùng ký tự với trọng lượng phông chữ mạnh

⨯ ⨯sản phẩm U + 2A2F Gibbs

✖ ✖U + 2716 dấu nhân nặng

Ngoài ra còn có một biểu tượng cảm xúc nếu bạn hỗ trợ nó. Nếu bạn không nhìn thấy một hình vuông =❌

Tôi cũng đã thực hiện ví dụ mã đơn giản này trên Codepen khi tôi làm việc với một nhà thiết kế đã yêu cầu tôi cho cô ấy thấy nó trông như thế nào khi tôi hỏi liệu tôi có thể thay thế nút đóng của bạn bằng phiên bản được mã hóa thay vì hình ảnh không.

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

HTML

✕ ✕ ✓ ✓
✖ ✖ ✔ ✔

✗ ✗
✘✘

× × ×

CSS

Nếu bạn muốn sử dụng các ký tự trên từ CSS (ví dụ: trong một :beforehoặc :aftergiả), chỉ cần sử dụng \giá trị Unicode HEX đã thoát , ví dụ như:

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

Sử dụng các ví dụ cho các ngôn ngữ khác nhau :

• ✕ HTML
• '\2715' CSS như tức là:.clear:before { content: '\2715'; }
• '\u2715' Chuỗi JavaScript

Véc-tơ là một thứ tuyệt vời khác không quá dày. Mã HTML là ✕, hoặc 2715trong hex.

Như @Haza đã chỉ ra biểu tượng lần có thể được sử dụng. Twitter Bootstrap ánh xạ điều này đến một biểu tượng gần gũi để loại bỏ nội dung như phương thức và cảnh báo.

<button class="close">&times;</button>

Tôi thích Phông chữ Tuyệt vời: http : //fortawclaw.github.io/Font-Awgie/icons/

Biểu tượng bạn sẽ tìm kiếm là fa-times. Nó đơn giản như thế này để sử dụng:

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

Fiddle ở đây

Đây có lẽ là phương pháp sư phạm, nhưng cho đến nay vẫn chưa có ai thực sự đưa ra giải pháp "chỉ tạo một nút đóng chỉ bằng CSS". chỉ có. Ở đây bạn đi:

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

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

có một cái khác không được đề cập ở đây - mỏng đẹp - nếu bạn cần kiểu đó cho dự án của bạn:

╳ or decimal: ╳

×và font-family: Garamond, "Apple Garamond";làm cho nó đủ tốt. Phông chữ Garhua mỏng và an toàn trên web

Điều này làm việc tốt cho tôi:

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

Hãy quên một phông chữ và sử dụng một hình ảnh nền!

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

Điều này sẽ dễ tiếp cận hơn đối với người dùng truy cập trang bằng trình đọc màn hình.

Điều này là dành cho những người muốn làm cho Xnhỏ / lớn và đỏ của họ!

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

Bạn có thể sử dụng văn bản chỉ có thể truy cập được đối với trình đọc màn hình bằng cách đặt nó trong một khoảng mà bạn ẩn theo cách có thể truy cập được. Đặt x vào CSS mà trình đọc màn hình không thể đọc được, do đó sẽ không gây nhầm lẫn, nhưng hiển thị trên trang và người dùng bàn phím cũng có thể truy cập được.

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

<button class="close"><span class="hidden">close</span></button>

Sử dụng các trình duyệt hiện đại, bạn có thể xoay dấu +:

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

sau đó chỉ cần đặt html sau đây vào nơi bạn cần:

 <span class='popupClose'></span>

×tốt hơn ✖là ✖hành xử kỳ lạ trong Edge và Internet explorer (được thử nghiệm trong IE11). Nó không có màu đúng và được thay thế bằng "biểu tượng cảm xúc"