Carattere Unicode per "X" annullare / chiudere?
Risposte:
✖ funziona davvero bene. Il codice HTML è ✖.
Che ne dici di usare il segno x (il simbolo della moltiplicazione), ×in HTML, per questo?
"x" (lettera) non deve essere usato per rappresentare nient'altro che la lettera X.
× ×o ×(stessa cosa) segno di moltiplicazione U + 00D7
× stesso personaggio con un forte peso del carattere
⨯ Prodotto ⨯U + 2A2F Gibbs
✖ ✖U + 2716 segno di moltiplicazione pesante
C'è anche un'emoji ❌ se la supporti. Altrimenti hai appena visto un quadrato =❌
Ho anche fatto questo semplice esempio di codice su Codepen quando stavo lavorando con un designer che mi ha chiesto di mostrarle come sarebbe stato quando le avrei chiesto di sostituire il tuo pulsante di chiusura con una versione codificata anziché un'immagine.
<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
Se vuoi usare i suddetti caratteri da CSS (come ad es .: in an :beforeo :afterpseudo) usa semplicemente il \valore HEX Unicode con escape , come ad esempio:
[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>Usa esempi per diverse lingue :
✕HTML'\2715'CSS come ie:.clear:before { content: '\2715'; }'\u2715'Stringa JavaScript
Come ha sottolineato @Haza, è possibile utilizzare il simbolo dei tempi. Twitter Bootstrap lo associa a un'icona di chiusura per eliminare contenuti come modali e avvisi.
<button class="close">×</button>Preferisco Font Awesome: http://fortawesome.github.io/Font-Awesome/icons/
L'icona che dovresti cercare è fa-times. È così semplice da usare:
<button><i class="fa fa-times"></i> Close</button>Questo è probabilmente pedanteria, ma finora nessuno ha davvero dato una soluzione "per creare un pulsante di chiusura usando solo CSS". solo. Ecco qui:
#close:before {
content: "✖";
border: 1px solid gray;
background-color:#eee;
padding:0.5em;
cursor: pointer;
}
Questo funziona bene per me:
<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>Dimentica un font e usa un'immagine di sfondo!
<!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>Questo sarà più accessibile per gli utenti che visitano la pagina con uno screen reader.
Questo è per le persone che vogliono rendere il loro Xpiccolo / grande e rosso!
HTML:
<div class="col-sm-2"> <span><div class="red-x">✖</div></span>
<p>close</p>
</div>
<div class="red-x big-x">✖</div>CSS:
.red-x {
color: red;
}
.big-x {
font-size: 70px;
text-align: center;
}Puoi usare il testo accessibile solo agli screen reader posizionandolo in un arco che nascondi in un modo accessibile. Posiziona la x nel CSS che non può essere letta dagli screen reader, quindi non confondere, ma è visibile sulla pagina e accessibile anche dagli utenti della tastiera.
<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>Utilizzando i browser moderni puoi ruotare un segno +:
.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);
}quindi basta posizionare il seguente codice HTML dove è necessario:
<span class='popupClose'></span>×è meglio di ✖come ✖si comporta in modo strano in Edge e Internet Explorer (testato in Internet Explorer 11). Non ottiene il colore giusto ed è sostituito da una "emoji"
Lucida Sans UnicodeeArial Unicode MSsostengo anche tali simboli unicode. Se non utilizzi un carattere che supporti questi caratteri su alcuni browser (in particolare IE precedente), otterrai solo rettangoli che indicano simboli non supportati. Uso una versione ridotta di DejaVu per tali simboli.