web-dev-qa-db-ja.com

CSS「x」閉じるボタンのフォントはどれですか？

CSSのみを使用して閉じるボタンを作成したい。

これを行うのは私が最初ではないので、どのフォントが高さと同じ幅の「x」を持っているかを知っているので、クロスブラウザを使用して閉じるボタンのように見えますか？

cssfontsfont-face
203
Leonti

✖本当にうまくいきます。 HTMLコードは✖です。

481
eipark

そのために、HTMLでのXマーク（乗算記号）×の使用はどうでしょうか。

「x」（文字）は、文字X以外のものを表すために使用しないでください。

72
Haza

××または×（同じもの）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>
57
davidcondrey

HTML

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

✗&#x2717;
✘&#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
34
Roko C. Buljan

✕も厚すぎない素晴らしいものです。 HTMLコードは&#10005;、または16進数の2715です。

21
emlai

@Hazaが指摘したように、timesシンボルを使用できます。 Twitter Bootstrap これを 閉じるアイコン にマッピングします。モーダルやアラートなどのコンテンツを削除します。

<button class="close">&times;</button>
19
John Lehmann

私はFont Awesomeを好む： http://fortawesome.github.io/Font-Awesome/icons/

探しているアイコンはfa-timesです。使用するのはこれと同じくらい簡単です：

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

ここを中心に

6
prograhammer

ここに記載されていない別のものがあります-すてきな-あなたのプロジェクトにそのような外観が必要な場合：╳

&#x2573; or decimal: &#9587;
5
Picard

これはおそらく、つまらないものですが、「CSSのみを使用して閉じるボタンを作成する」という解決策を実際に提供した人はいません。のみ。どうぞ：

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

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

5
Steve Bennett

&times;とfont-family: Garamond, "Apple Garamond";で十分になります。 Garamondフォントは薄く、Webセーフです

proper close X

4
Iggy

これは私にとってうまくいきます：

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

これは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;
}
2
JMASTER B

フォントを忘れて、背景画像を使用してください！

<!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
Richard JP Le Guen

最新のブラウザを使用すると、+記号を回転できます。

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

スクリーンリーダーのみがアクセスできるテキストを、アクセス可能な方法で非表示にするスパンに配置することで使用できます。スクリーンリーダーで読むことができないCSSにxを配置します。これにより混乱することはありませんが、ページに表示され、キーボードユーザーもアクセスできます。

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

&times;はEdgeおよびInternet Explorer（IE11でテスト済み）で奇妙に動作するため、&#10006;は&#10006;よりも優れています。正しい色にならず、「絵文字」に置き換えられます

0
Raphael Pinel