✖ works really well. The HTML code is ✖
.
An alternative is ✕
: ✕
What about using the ×-mark (the multiplication symbol), ×
in HTML, for that?
"x" (letter) should not be used to represent anything else other than the letter X.
× ×
or ×
(same thing) U+00D7 multiplication sign
× same character with a strong font weight
⨯ ⨯
U+2A2F Gibbs product
✖ ✖
U+2716 heavy multiplication sign
There's also an emoji ❌ if you support it. If you don't you just saw a square = ❌
I also made this simple code example on Codepen when I was working with a designer who asked me to show her what it would look like when I asked if I could replace your close button with a coded version rather than an image.
<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
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>
✕
HTML
'\2715'
CSS like i.e: .clear:before { content: '\2715'; }
'\u2715'
JavaScript stringhttps://home.unicode.org/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With