Estoy buscando un carácter HTML o ASCII que es un triángulo que apunta hacia arriba o hacia abajo para poder usarlo como un interruptor de palanca.
Encontré ↑ ( ↑
) y ↓ ( ↓
), pero esos tienen un tallo estrecho. Estoy buscando solo la flecha HTML "cabeza".
Respuestas:
Puntas de flechas Unicode:
Para uso ▲ y ▼
▲
y,▼
respectivamente, si no puede incluir caracteres Unicode directamente (¡use UTF-8!).Tenga en cuenta que el soporte de fuentes para las versiones más pequeñas no es tan bueno. Es mejor usar las versiones grandes en letra más pequeña.
Más flechas Unicode están en:
Por último, estas flechas no son ASCII, incluidas ↑ y ↓: son Unicode.
fuente
Para entidades HTML
◄ =
◄
► =
►
▼ =
▼
▲ =
▲
fuente
OPCIÓN 1: FLECHAS DE ORDEN DE COLUMNA UNICODE
Encontré este muy útil para un clasificador de columnas de un solo carácter. (Se ve bien mejorado) .
⇕
= ⇕NOTA IMPORTANTE (cuando se usan símbolos Unicode)
El soporte Unicode varía según el símbolo de elección, el navegador y la familia de fuentes. Si encuentra que el símbolo elegido no funciona en algunos navegadores, intente usar una familia de fuentes diferente.
"Segoe UI Symbol"
Sin embargo, Microsoft recomienda que sea conveniente incluir la fuente en su sitio web, ya que no muchas personas la tienen en sus computadoras.Abra esta página en otros navegadores para ver qué símbolos se representan con la fuente predeterminada.
Algunas flechas Unicode más.
Puede copiarlos directamente de la página a continuación o puede usar el código.
Cada fila de flechas está numerada de izquierda a derecha:
Simplemente inserte el número / letra correspondiente antes del punto y coma de cierre como se indica arriba.
ș
← ↑ → ↓ ↔ ↕ ↖ ↗ ↘ ↙ ↚ ↛ ↜ ↝ ↞ ↟
Ț
↠ ↡ ↢ ↣ ↤ ↥ ↦ ↧ ↨ ↩ ↪ ↫ ↬ ↭ ↮ ↯
ț
↰ ↱ ↲ ↳ ↴ ↵ ↶ ↷ ↸ ↹ ↺ ↻ ↼ ↽ ↾ ↿
Ȝ
⇀ ⇁ ⇂ ⇃ ⇄ ⇅ ⇆ ⇇ ⇈ ⇉ ⇊ ⇋ ⇌ ⇍ ⇎ ⇏
ȝ
⇐ ⇑ ⇒ ⇓ ⇔ ⇕ ⇖ ⇗ ⇘ ⇙ ⇚ ⇛ ⇜ ⇝ ⇞ ⇟
Ȟ
⇠ ⇡ ⇢ ⇣ ⇤ ⇥ ⇦ ⇧ ⇨ ⇩ ⇪ ⇫ ⇬ ⇭ ⇮ ⇯
ȟ
⇰ ⇱ ⇲ ⇳ ⇴ ⇵ ⇶ ⇷ ⇸ ⇹ ⇺ ⇻ ⇼ ⇽ ⇾ ⇿
Símbolos HTML unicode adicionales
Una lista seleccionada de otros íconos / símbolos útiles de Unicode.
OPCIÓN 2: CHEVRONS CSS PURO
Recientemente hice un artículo sobre cómo crear chevrones de manera eficiente usando solo CSS (no se requieren imágenes).
Cómo simplemente alterar:
CLICK FOR DEMO ON JSFIDDLE
CSS (eficiente con soporte de navegador cruzado)
OPCIÓN 3: ICONOS DE IMAGEN CSS BASE64
ARRIBA ABAJO
ABAJO
ARRIBA
Usando solo unas pocas líneas de CSS podemos codificar nuestras imágenes en base64.
CLICK FOR DEMO ON JSFIDDLE
PROS
CONTRAS
CSS
fuente
⇫
y superiores se ven bien en FF e IE, pero no se procesan en Chrome.Lo siento pero solo están en Unicode. :(
Grandes:
U+25B2
(Triángulo negro hacia arriba ▲)U+25BC
(Triángulo negro que apunta hacia abajo ▼)U+25C0
(Triángulo negro que apunta a la izquierda ◀)U+25B6
(Triángulo negro que apunta hacia la derecha ▶)Los blancos grandes:
U+25B3
(Triángulo blanco hacia arriba △)U+25BD
(Triángulo blanco apuntando hacia abajo ▽)U+25C1
(Triángulo blanco que apunta a la izquierda ◁)U+25B7
(Triángulo blanco que apunta a la derecha ▷)También hay algunos triángulos más pequeños:
U+25B4
(Triángulo pequeño negro hacia arriba ▴)U+25C2
(Triángulo negro pequeño hacia la izquierda ◂)U+25BE
(Triángulo negro que apunta hacia abajo ▾)U+25B8
(Triángulo pequeño negro que señala a la derecha ▸)También algunos blancos:
U+25C3
(Triángulo blanco pequeño hacia la izquierda ◃)U+25BF
(Triángulo blanco pequeño hacia abajo ▿)U+25B9
(Triángulo pequeño blanco que señala a la derecha ▹)U+25B5
(Triángulo pequeño blanco hacia arriba ▵)También hay algunos triángulos "puntiagudos". Puede leer más aquí en Wikipedia:
http://en.wikipedia.org/wiki/Geometric_Shapes
Pero desafortunadamente, todos son Unicode en lugar de ASCII. Si aún desea usar ASCII, puede usar un archivo de imagen para usarlo
^
yv
. (Al igual que Google Maps en la versión móvil,esto se refería al antiguo Google Maps móvil)Como otros también sugirieron, también puede crear triángulos con HTML, ya sea con bordes CSS o formas SVG o incluso lienzos JavaScript.
CSS
SVG
JavaScript
Manifestación
fuente
Dado que está utilizando estas flechas para un interruptor de palanca, puede considerar crear estas flechas con un elemento html usando los siguientes estilos en lugar de caracteres unicode.
http://jsfiddle.net/FrsGR/
fuente
:after
para crear burbujas de diálogo.Hay puntas de flecha literales en el bloque de letras del modificador de espaciado :
fuente
˄
o decimal˄
. Pero si tiene las codificaciones de página correctas, debería poder copiarlas y pegarlas en el documento.Hay varias formas correctas de mostrar un triángulo apuntando hacia abajo.
Método 1: usar entidad HTML decimal
HTML:
Método 2: usar entidad HTML hexadecimal
HTML:
Método 3: usa el personaje directamente
HTML:
Método 4: usa CSS
HTML:
CSS:
Cada uno de estos tres métodos debe tener el mismo resultado. Para otros símbolos, existen las mismas tres opciones. Algunos incluso tienen una cuarta opción, que le permite utilizar una referencia basada en cadenas (por ejemplo,
♥
para mostrar ♥).Puede utilizar un sitio web de referencia como Unicode-table.com para encontrar qué iconos son compatibles con UNICODE y con qué códigos corresponden. Por ejemplo, encontrará los valores para el triángulo apuntando hacia abajo en http://unicode-table.com/en/25BC/ .
Tenga en cuenta que estos métodos son suficientes solo para los iconos que están disponibles de forma predeterminada en todos los navegadores. Para símbolos como ☃, ❄, ★, ☂, ☭, ⎗ o ⎘, es mucho menos probable que sea así. Si bien es posible proporcionar compatibilidad entre navegadores para otros símbolos UNICODE, el procedimiento es un poco más complicado.
Si desea saber cómo agregar compatibilidad con caracteres UNICODE menos comunes, consulte Crear fuente web con símbolos de plano multilingüe suplementario Unicode para obtener más información sobre cómo hacerlo.
Imágenes de fondo
Una estrategia totalmente diferente es el uso de imágenes de fondo en lugar de fuentes. Para un rendimiento óptimo, es mejor incrustar la imagen en su archivo CSS codificándola en base, como se menciona por ejemplo. @ weasel5i2 y @Obsidian. Sin embargo, recomendaría el uso de SVG en lugar de GIF, sin embargo, es mejor tanto para el rendimiento como para la nitidez de sus símbolos.
El siguiente código es la base64 para y la versión SVG del icono:
Cuándo usar imágenes de fondo o fuentes
Para muchos casos de uso, las imágenes de fondo basadas en SVG y las fuentes de iconos son en gran medida equivalentes con respecto al rendimiento y la flexibilidad. Para decidir cuál elegir, considere las siguientes diferencias:
Imágenes SVG
color
,font-size
,line-height
,background-color
u otras reglas de estilo relacionadas con la fuente para cambiar la visualización del icono, pero puede hacer referencia a diferentes componentes del icono como formas individualmente.Fuentes de iconos
color
,font-size
,line-height
,background-color
u otras reglas de estilo relacionadas con la fuente para cambiar la visualización del iconoPersonalmente, recomendaría el uso de imágenes de fondo solo cuando necesite varios colores y esos colores no se puedan lograr mediante
color
,background-color
y otras reglas CSS relacionadas con el color para las fuentes.El principal beneficio de usar imágenes SVG es que puedes darles a los diferentes componentes de un símbolo su propio estilo. Si incrusta su código SVG XML en el documento HTML, esto es muy similar al diseño del HTML. Sin embargo, esto daría como resultado una página web que utiliza etiquetas HTML y SVG, lo que podría reducir significativamente la legibilidad de una página web. También agrega hinchazón adicional si el símbolo se repite en varias páginas y debe tener en cuenta que las versiones antiguas de IE no tienen o tienen soporte limitado para SVG.
fuente
"No ASCII (tampoco ↑ / ↓)" necesita calificación.
Si bien estos caracteres no están definidos en el Código Estándar Americano para el Intercambio de Información como glifos, sus códigos FUERON comúnmente utilizados para dar una presentación gráfica de los códigos ASCII 24 y 25 (hex 18 y 19, CANcel y EM: Fin de Medio). Código página 437 (llamada ASCII Extendida por IBM, incluye los códigos numéricos 128 a 255) definió el uso de estos glifos como códigos ASCII y la ubicuidad de estas convenciones impregnó a la industria según su implementación como estándares por compañías líderes como HP, particularmente para impresoras e IBM, particularmente para microcomputadoras que comienzan con la PC original.
Del mismo modo que el uso de los códigos ASCII para CAN y EM era relativamente obsoleto en ese momento, lo que justificaba su uso como glifos, el paso del tiempo hizo que el uso de los códigos como glifos fuera obsoleto por el uso actual de las convenciones UNICODE.
Se debe enfatizar que las extensiones a ASCII realizadas por IBM en ASCII extendido, incluyeron no solo un conjunto numérico más grande para los códigos numéricos 128 a 255, sino que también extendieron el uso de algunos códigos de control numérico, en el rango ASCII 0 a 32, desde solo protocolos de control de transmisión de medios para incluir glifos. A menudo se supone, incorrectamente, que los primeros 0 a 128 no fueron "extendidos" y que IBM estaba usando los glifos de ASCII convencional para este rango. Este error también se perpetra en una de las referencias anteriores. Este error se hizo tan generalizado que redefinió coloquialmente ASCII subliminalmente.
fuente
Sé que llego tarde a la fiesta, pero también puedes lograr esto con CSS simple:
HTML:
(Puede ser cualquier elemento HTML, si está utilizando un elemento en línea como,
<span>
por ejemplo, asegúrese de convertirlo en un elemento de bloque / bloque en línea condisplay:block;
odisplay:inline-block
) :<div class="up"></div>
y
<div class="down"></div>
CSS:
También puedes lograrlo usando
:before
y:after
pseudo-elementos, que en realidad es una mejor manera, ya que evita crear un marcado adicional. Pero depende de usted cómo le gustaría lograrlo.-
Aquí hay una demostración en CodePen con muchas posibilidades de flecha.
fuente
Mucha gente aquí sugiere usar los triángulos, pero a veces necesitas un galón.
Tuvimos un caso en el que nuestro botón muestra un galón, y queríamos que el manual del usuario se refiriera al botón de una manera que también sea reconocida por un usuario no técnico. Entonces necesitábamos un letrero de chevron.
Usamos ﹀ al final. Se conoce como FORMULARIO DE PRESENTACIÓN PARA EL SOPORTE VERTICAL DE ÁNGULO DERECHO y su código es U + FE40.
fuente
Por lo general, lo mejor es ver un personaje en su contexto.
Aquí está la lista completa de caracteres Unicode y cómo su navegador los muestra actualmente. Estoy viendo esta lista evolucionando, versiones del navegador después de otras.
Esta lista se obtiene por iteración en decimal de la tabla unicode de entidades html, puede tomar algunos segundos, pero es muy útil para mí en muchos casos.
Al pasar el mouse rápidamente por un personaje determinado, obtendrás el dec y el hexadecimal y los atajos para generarlo con un teclado.
El mismo fragmento que un marcador:
Para generar esa lista desde php :
Para generar esa lista en la consola, usando php :
Aquí hay un extracto de texto plano, de flechas, algunas vienen con Unicode 10.0 . http://unicode.org/versions/Unicode10.0.0/
🔙🔚🔛🔜🔝🖗🖘🖙🖚🖛🖜🖝🖞🖟🞀🞁🞂🞃🔺🔻🔼🔽𝆒𝆓𐃘⭝⭞⭟⭠⭡⭢⭣⭤⭥⭦⭧⭨⭩⭪⭫⭬⭭⭮⭯⭰⭱⭲⭳⭶⭷ ⭸⭹⭺⭻⭼⭽⭾⭿⮀⮁⮂⮃⮄⮅⮆⮇⮈⮉⮊⮋⮌⮍⮎⮏⮐⮑⮒⮓⮔⮕⮘⮙⮚⮛⮜⮝⮞⮟⮠⮡⮢⮣⮤⮥⮦⮧⮨⮩⮪⮫ ⮬⮭⮮⮯⮰⮱⮲⮳⮴⮵⮶⮷⮸⮹⮽⮾⮿⯀⯁⯂⯅⯆⯇⯈⬶⬷⬸⬹⬺⬻⬼⬽⬾⬀⬁⬂⬃⬄⬅⬆⬇⬈⬉⬊⬋⬌⬍⬎⬏⬐ ⬑⤀⤁⤂⤃⤄⤅⤆⤇⤈⤉⤊⤋⤌⤍⤎⤏⤐⤑⤒⤓⤔⤕⤖⤗⤘⤙⤚⤛⤜⤝⤞⤟⤠⤡⤢⤣⤤⤥⤦⤧⤨⤩⤪⤫⤬⤭⤮⤯⤰ ⤱⤲⤳⤴⤵⤶⤷⤸⤹⤺⤻⤼⤽⤾⤿⥀⥁⥂⥃⥄⥅⥆⥇⥈⥉⥊⥋⥌⥍⥎⥏⥐⥑⥒⥓⥔⥕⥖⥗⥘⥙⥚⥛⥜⥝⥞⥟⥠⥡⥢ ⥣⥤⥥⥦⥧⥨⥩⥪⥫⥬⥭⥮⥯⥰⥱⥲⥳⥴⥵⟨⟩⟪⟫⟬⟭⟮⟯⟰⟱⟲⟳⟴⟵⟶⟷⟸⟹⟺⟻⟼⟽⟾⟿➘➙➚➛➜➝➞ ➟➠➡ ➢➣➤➥➦➧➨➩➪➫➬➭➮➯➰➱➲➳➴➵➶➷➸➹➺➻➼➽➾⊲⊳⊴⊵ ← ↑ → ↓ ↔↕↖↗↘↙↚↛↜↝ ↞↟↠↡↢↣↤↥↦↧↨↩↪↫↬↭↮↯↰↱↲↳↴↵↶↷↸↹↺↻↼↽↾↿⇀⇁⇂⇃⇄⇅⇆⇇⇈⇉⇊⇋⇌⇍⇎⇏ ⇐⇑⇒⇓⇔⇕⇖⇗⇘⇙⇚⇛⇜⇝⇞⇟⇠⇡⇢⇣⇤⇥⇦⇧⇨⇩⇪⇫⇬⇭⇮⇯⇰⇱⇲⇳⇴⇵⇶⇷⇸⇹⇺⇻⇼⇽⇾⇿ᐂᐃᐄᐅᐆᐇᐈᐉᐊᐋᐌᐍᐎᐏᐐᐑᐒᐓᐔᐕᐖᐗᐘᐙᐚᐛᐫᐬᐭᐮᐯᐰᐱᐲᐳᐴᐵᐶᐷᐸᐹᐺᐻᐼᐽᐾᐿᑀᑁᑂᑃᑄᑅᑆᑇᑈ🞀 🞁🞂🞃🠀🠁🠂🠃🠄🠅🠆🠇🠈🠉🠊🠋🠐🠑🠒🠓🠔🠕🠖🠗🠘🠙🠚🠛🠜🠝🠞🠟🠠🠡🠢🠣🠤🠥🠦🠧🠨🠩🠪🠫🠬🠭🠮🠯🠰🠱🠲 🠳🠴🠵🠶🠷🠸🠹🠺🠻🠼🠽🠾🠿🡀🡁🡂🡃🡄🡅🡆🡇🡐🡑🡒🡓🡔🡕🡖🡗🡘🡙🡠🡡🡢🡣🡤🡥🡦🡧🡨🡩🡪🡫🡬🡭🡮🡯🡰🡱🡲 🡳🡴🡵🡶🡷🡸🡹🡺🡻🡼🡽🡾🡿🢀🢁🢂🢃🢄🢅🢆🢇🢐🢑🢒🢓🢔🢕🢖🢗🢘🢙🢚🢛🢜🢝🢞🢟🢠🢡🢢🢣🢤🢥🢦🢧🢨🢩🢪🢫
fuente
Entidades HTML para triángulos vacíos
◁ =
◁
▷ =
▷
▽ =
▽
△ =
△
fuente
▲ ▼ Estos son U + 25B2 (
▲
) y U + 25BC (▼
) respectivamentefuente
Creo que el autor de la pregunta puede estar refiriéndose a uno de estos (ver imagen adjunta): encontré esta pregunta de StackOverflow mientras buscaba lo mismo.
Desafortunadamente, este glifo no parece existir como una entidad de carácter distinta en ninguna parte. Wikipedia lo logra a continuación utilizando JavaScript en línea e img content = "data: image / gif ..." para lograr el símbolo.
Por cierto, aquí está la base64 para ello:
¡Espero que esto ayude a alguien!
fuente
Este parece implicar que 030 y 031 son triángulos arriba y abajo.
(Como señaló Bobince, esto no parece ser un estándar ASCII)
fuente
Uso ▼ y ▲, pero puede que no funcionen para ti. Yo uso alt 11551 para el primero y 11550 para el segundo. Siempre puede copiarlos y pegarlos si el ascii no es el mismo para su sistema.
fuente
Decidí que los símbolos más populares recomendados aquí (▼ y ▲) se ven demasiado en negrita, así que en el sitio codepoints.net, recomendado por el usuario ADJenks, encontré estos símbolos que se ven mejor para mi gusto: 🞀 (U + 1F780) 🞁 (U + 1F781) 🞂 (U + 1F782) 🞃 (U + 1F783)
fuente
El sitio que me gusta usar para esto es codepoints.net
Aquí hay una búsqueda de las palabras "punta de flecha" y "triángulo": https://codepoints.net/search?q=arrowhead+triangle
Tiene algunas coincidencias para la "flecha con cabeza de triángulo" que tienen tallos, pero solo tiene 4 páginas pequeñas para hojear y hay muchas coincidencias buenas con detalles agradables en cada personaje.
También hay un bloque de código para "Símbolos y flechas misceláneos" y este sitio web los enumera aquí: https://codepoints.net/miscellaneous_symbols_and_arrows
fuente
Aquí hay otro - ᐞ - STOP GLOTTAL Unicode U + 141E / CANADIAN SYLLABICS
fuente