What is the unicode character for the close symbol used by Twitter bootstrap?
UnicodeTwitter BootstrapUnicode Problem Overview
Just curious, because I just realized it wasn't an actual "x" (annoying how long that took to figure out).
Unicode Solutions
Solution 1 - Unicode
The multiplication sign ( × ) was a bit too small for what I wanted and increasing the font size broke other things, so I found these larger alternatives:
✕ Multiplication X (U+2715)
- Decimal HTML entity:
✕ - Hex HTML entity:
✕
✖ Heavy Multiplication X (U+2716)
- Decimal HTML entity:
✖ - Hex HTML entity:
✖
❌ Cross Mark (U+274C)
- Decimal HTML entity:
❌ - Hex HTML entity:
❌
I hope these will save somebody some time.
Solution 2 - Unicode
It uses ×.
You can use the following to obtain the desired information about any character:
$ perl -Mcharnames=:full -CA -e'
printf("U+%04X %s\n", $_, charnames::viacode($_))
for unpack "W*", $ARGV[0];
' ×
U+00D7 MULTIPLICATION SIGN
If you're going to use it in HTML, you can encode it as follows:
$ perl -MHTML::Entities -CA -e'
CORE::say encode_entities($ARGV[0]);
' ×
×
Notes:
- The above programs expect the argument to be encoded using UTF-8.
- The line breaks can be removed to make true one-liners.
Solution 3 - Unicode
If you don't want to use Unicode, you can simply use the HTML character entity ×.
Solution 4 - Unicode
right answer today: ×
used in close buttons
Solution 5 - Unicode
Instead of giving you fish I will give you dynamite. When working online if you need to figure out what Unicode specific character is you can use following javascript (you might also need to add .val() or .text() or [0] after selector dependent on situation):
$('yourTextselector').charCodeAt(0).toString(16) // charCodeAt is the position of character in text you selected.
Example:
"ก้้้้้้้้้้้้้้้้้้้้".charCodeAt(2).toString(16)
returns "e49"
which means that it's \u0e49 since leading zeroes get 'swallowed'.
This should help you identify other characters that look similar but are in fact different
Hope this saves you some time.
Solution 6 - Unicode
Now that you have your answer, here is an additional helpful trick when working with Unicode on Windows OS.
- Open up Wordpad
- Type in the Unicode value such as 2715
- With cursor next to what you typed, press ALT+X on the keyboard.
It will show the visual representation of that character. This trick works in reverse as well. If you do a copy and paste of the visual representation and then hit ALT+X it will show you the numeric value.
Solution 7 - Unicode
Noticed ❎ that looks nice, but display in green only into Firefox.
A possible workaround to adjust that is to use css filters.
Inspect the element to get the filter values.
adjustHUE.addEventListener("input", (e) => {
document.querySelector("#close").style.cssText += "filter:hue-rotate(" + e.target.value + "deg) brightness(" + adjustBRIGHTNESS.value + ")"
})
adjustBRIGHTNESS.addEventListener("input", (e) => {
document.querySelector("#close").style.cssText += "filter:hue-rotate(" + adjustHUE.value + "deg) brightness(" + e.target.value + ")"
})
#close {
font-size: 6rem;
padding: 0 2rem
}
<div id="close" style="filter:hue-rotate(0deg)">❎</div>
Hue:<br>
<input id="adjustHUE" type="range" min="0" max="360" value="0"><br>
Brightness:<br>
<input id="adjustBRIGHTNESS" type="range" min="0.2" max="1" step="0.01" value="1"><br>
<div id="out"></div>
From css, this may look like:
span {
font-size: 2rem;
z-index: 2;
filter: hue-rotate(277deg) brightness(0.96);
float: right;
cursor:pointer
}
<span>❎</span>