「X」のUnicode文字のキャンセル/クローズ？
回答:
✖本当にうまくいきます。HTMLコードは✖です。
×そのために、HTMLで×マーク（乗算記号）を使用するのはどうでしょうか。
「x」（文字）は、文字X以外のものを表すために使用しないでください。
× ×または×（同じもの）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>
HTML
✕ ✕ ✓ ✓
✖ ✖ ✔ ✔
✗ ✗
✘✘
× × ×
CSS
CSSから上記の文字を使用する場合（ie：in :beforeまたは:afterpseudoなど）、エスケープされた\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>異なる言語の例を使用してください：
✕HTML'\2715'ieのようなCSS：.clear:before { content: '\2715'; }'\u2715'JavaScript文字列
@Hazaが指摘したように、時間記号を使用できます。 Twitter Bootstrapは、これをモーダルやアラートなどのコンテンツを閉じるための閉じるアイコンにマップします。
<button class="close">×</button>私はFont Awesomeを好みます：http : //fortawesome.github.io/Font-Awesome/icons/
あなたが探しているアイコンはfa-timesです。使用するのはこれと同じくらい簡単です：
<button><i class="fa fa-times"></i> Close</button>これはおそらく無茶苦茶ですが、これまでのところ「CSSのみを使用して閉じるボタンを作成する」というソリューションを提供している人はまだいません。のみ。どうぞ：
#close:before {
content: "✖";
border: 1px solid gray;
background-color:#eee;
padding:0.5em;
cursor: pointer;
}
これは私にとってうまくいきます：
<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();'>✖</a>
Click "X" to close this box
</div>フォントを忘れて、背景画像を使用してください！
<!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>これは、スクリーンリーダーでページにアクセスするユーザーにとってよりアクセスしやすくなります。
アクセス可能な方法で非表示にするスパンに配置することで、スクリーンリーダーのみがアクセスできるテキストを使用できます。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:'\00d7'; color:red; font-size:2em;}
</style>
<button class="close"><span class="hidden">close</span></button>最新のブラウザを使用すると、+記号を回転できます。
.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>
Lucida Sans Unicodeし、Arial Unicode MSまた、Unicodeの記号をサポートしています。一部のブラウザー（特に古いIE）でこれらの文字をサポートするフォントを使用しない場合、サポートされていない記号を示す四角形のみが表示されます。そのようなシンボルには、DejaVuのストリップバージョンを使用します。