开发者

What is the unicode character for the close symbol used by Twitter bootstrap?

开发者 https://www.devze.com 2023-04-06 02:14 出处:网络
Just curio开发者_StackOverflowus, because I just realized it wasn\'t an actual \"x\" (annoying how long that took to figure out).The multiplication sign ( × ) was a bit too small for what I want

Just curio开发者_StackOverflowus, because I just realized it wasn't an actual "x" (annoying how long that took to figure out).


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.


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.


If you don't want to use Unicode, you can simply use the HTML character entity ×.


right answer today: × used in close buttons


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.


Now that you have your answer, here is an additional helpful trick when working with Unicode on Windows OS.

  1. Open up Wordpad
  2. Type in the Unicode value such as 2715
  3. 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.


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>

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号