¿Cuál es el carácter Unicode para el símbolo de cierre utilizado por Twitter bootstrap?

81

Solo por curiosidad, porque me acabo de dar cuenta de que no era una "x" real (es molesto cuánto tiempo me llevó averiguarlo).

unicode twitter-bootstrap Bialecki
fuente
Bonito @InsaneSkull, incluso mejor: & # 215;
Heitor
Vi muchas otras preguntas como esta en la red y todas están "en espera" porque están "basadas en opiniones". ¿No debería esta recibir el mismo tratamiento?
keanu_reeves
No he visto las otras preguntas, así que no puedo hablar sobre ellas, pero esta definitivamente no se basa en opiniones. Hay una respuesta completamente objetiva a esta pregunta.
ikegami

Respuestas:

34

Utiliza ×.

Puede utilizar lo siguiente para obtener la información deseada sobre cualquier personaje:

$ perl -Mcharnames=:full -CA -e'
   printf("U+%04X %s\n", $_, charnames::viacode($_))
      for unpack "W*", $ARGV[0];
' ×
U+00D7 MULTIPLICATION SIGN

Si lo va a usar en HTML, puede codificarlo de la siguiente manera:

$ perl -MHTML::Entities -CA -e'
   CORE::say encode_entities($ARGV[0]);
' ×
×

Notas:

  • Los programas anteriores esperan que el argumento se codifique utilizando UTF-8.
  • Los saltos de línea se pueden eliminar para hacer verdaderas frases ingeniosas.
ikegami
fuente
Por favor, use pseudo código para que pudiéramos entender la respuesta
@Pauli Sudarshan Terho, El primer programa genera el número (U + 00D7) y el nombre (SIGNO DE MULTIPLICACIÓN) del punto de código. El segundo, una entidad HTML que lo resuelve. No estoy seguro de cómo alguien podría pensar en algo diferente.
ikegami
No creo que Twitter esté implementado en Perl. Su código no prueba que sea el mismo Unicode que usa Twitter.
@Pauli Sudarshan Terho, no es necesario. Proporcioné el personaje, di información sobre el personaje y mostré cómo obtenerlo para otros personajes en el proceso. (Y lo acabo de actualizar para que funcione para cadenas completas además de caracteres individuales). Eso va más allá de lo que pedía el OP.
ikegami
No encuentro ningún ejemplo para confirmar el personaje, ¿cómo sabes que es & time; ? Twitter Bootstrap está escrito en JS, no en Perl. Los ejemplos no tienen & times; getbootstrap.com/docs/4.0/examples
271

El signo de multiplicación (×) era un poco demasiado pequeño para lo que quería y al aumentar el tamaño de fuente se rompieron otras cosas, así que encontré estas alternativas más grandes:

✕ Multiplicación X (U + 2715)

  • Entidad HTML decimal: ✕
  • Entidad HTML hexadecimal: ✕

✖ Multiplicación pesada X (U + 2716)

  • Entidad HTML decimal: ✖
  • Entidad HTML hexadecimal: ✖

❌ Marca de cruz (U + 274C)

  • Entidad HTML decimal: ❌
  • Entidad HTML hexadecimal: ❌

Espero que esto le salve a alguien algo de tiempo.

Valentin Flachsel
fuente
26

Si no desea utilizar Unicode, simplemente puede utilizar la entidad de carácter HTML ×.

Joyrex
fuente
4

respuesta correcta hoy: × usado en botones de cierre


fuente
3

En lugar de darte pescado, te daré dinamita. Cuando trabaje en línea, si necesita averiguar qué carácter específico de Unicode es, puede usar el siguiente javascript (es posible que también deba agregar .val () o .text () o [0] después del selector según la situación):

$('yourTextselector').charCodeAt(0).toString(16) // charCodeAt is the position of character in text you selected.

Ejemplo:

"ก้้้้้้้้้้้้้้้้้้้้".charCodeAt(2).toString(16)

devoluciones "e49"

lo que significa que es \u0e49desde que los ceros iniciales se 'tragan'.

Esto debería ayudarlo a identificar otros personajes que se parecen pero que de hecho son diferentes

Espero que esto te ahorre algo de tiempo.

Matas Vaitkevicius
fuente
2

Ahora que tiene su respuesta, aquí hay un truco útil adicional al trabajar con Unicode en el sistema operativo Windows.

  1. Abre Wordpad
  2. Escriba el valor Unicode, como 2715
  3. Con el cursor al lado de lo que escribió, presione ALT + X en el teclado.

Mostrará la representación visual de ese personaje. Este truco también funciona a la inversa. Si copia y pega la representación visual y luego presiona ALT + X, le mostrará el valor numérico.

Jason Brower
fuente
0

Notado ❎ que se ve bien, pero se muestra en verde solo en Firefox .

Una posible solución alternativa para ajustar eso es usar filtros CSS .

Inspeccione el elemento para obtener los valores del filtro.

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>
Expandir fragmento

Desde css, esto puede verse así:

span {
  font-size: 2rem;
  z-index: 2;
  filter: hue-rotate(277deg) brightness(0.96);
  float: right;
  cursor:pointer
}
<span>❎</span>
Expandir fragmento

NVRM
fuente