Estou procurando um caractere HTML ou ASCII que seja um triângulo apontando para cima ou para baixo, para que eu possa usá-lo como uma opção de alternância.
Encontrei ↑ ( ↑
) e ↓ ( ↓
) - mas esses têm uma haste estreita. Estou procurando apenas pela seta HTML "head".
Respostas:
Cabeças de setas Unicode:
Para ▲ e ▼ uso
▲
e▼
, respectivamente, se você não pode incluir caracteres Unicode diretamente (uso UTF-8!).Observe que o suporte à fonte para as versões menores não é tão bom. Melhor usar as versões grandes em fonte menor.
Mais setas Unicode estão em:
Por fim, essas setas não são ASCII, incluindo ↑ e ↓: elas são Unicode.
fonte
Para entidades HTML
◄ =
◄
► =
►
▼ =
▼
▲ =
▲
fonte
OPÇÃO 1: SETAS DE CLASSIFICAÇÃO DA COLUNA UNICODE
Achei este muito útil para um classificador de colunas de um único caractere. (Parece bom upscaled) .
⇕
= ⇕NOTA IMPORTANTE (Ao usar símbolos Unicode)
O suporte Unicode varia dependendo do símbolo de escolha, navegador e família de fontes. Se você achar que o símbolo escolhido não funciona em alguns navegadores, tente usar uma família de fontes diferente. A Microsoft recomenda,
"Segoe UI Symbol"
no entanto, seria aconselhável incluir a fonte no seu site, pois muitas pessoas não a têm em seus computadores.Abra esta página em outros navegadores para ver quais símbolos são renderizados com a fonte padrão.
Mais algumas setas Unicode.
Você pode copiá-los diretamente da página abaixo ou usar o código.
Cada linha de setas é numerada da esquerda para a direita:
Basta inserir o número / letra correspondente antes do ponto e vírgula de fechamento, como acima.
ș
← ↑ → ↓ ↔ ↕ ↗ ↘ ↙ ↚ ↛ ↜ ↝ ↞ ↟
Ț
↠ ↡ ↢ ↣ ↤ ↦ ↧ ↨ ↩ ↪ ↫ ↭ ↮ ↯
ț
↰ ↱ ↲ ↳ ↴ ↶ ↷ ↸ ↹ ↺ ↻ ↽ ↾ ↿
Ȝ
⇀ ⇁ ⇂ ⇃ ⇄ ⇆ ⇇ ⇈ ⇉ ⇊ ⇋ ⇍ ⇎ ⇏
ȝ
⇐ ⇑ ⇒ ⇓ ⇔ ⇖ ⇗ ⇘ ⇚ ⇛ ⇛ ⇝ ⇞ ⇟
Ȟ
⇠ ⇡ ⇢ ⇣ ⇤ ⇦ ⇧ ⇨ ⇩ ⇪ ⇫ ⇭ ⇮ ⇯
ȟ
⇰ ⇱ ⇲ ⇳ ⇴ ⇶ ⇷ ⇸ ⇹ ⇺ ⇻ ⇽ ⇾ ⇿
Símbolos unicode HTML adicionais
Uma lista selecionada de outros ícones / símbolos Unicode úteis.
OPÇÃO 2: CHEVRONS CSS PUROS
Recentemente, criei um artigo sobre a criação eficiente de divisas usando apenas CSS (não são necessárias imagens).
Como simplesmente alterar:
CLICK FOR DEMO ON JSFIDDLE
CSS (eficiente com suporte a vários navegadores)
OPÇÃO 3: ÍCONES DE IMAGEM CSS BASE64
CIMA BAIXO
BAIXA
ACIMA
Usando apenas algumas linhas de CSS, podemos codificar nossas imagens em base64.
CLICK FOR DEMO ON JSFIDDLE
PROS
CONS
CSS
fonte
⇫
e acima ficam bem no FF e no IE, mas não são renderizadas no Chrome.Desculpe, mas eles estão apenas em Unicode. :(
Grandes:
U+25B2
(Triângulo apontando para cima preto ▲)U+25BC
(Triângulo preto para baixo ▼)U+25C0
(Triângulo preto apontando para a esquerda ◀)U+25B6
(Triângulo preto apontando para a direita ▶)Brancos grandes:
U+25B3
(Triângulo branco para cima △)U+25BD
(Triângulo branco para baixo)U+25C1
(Triângulo branco à esquerda)U+25B7
(Triângulo branco apontando para a direita ▷)Há também alguns triângulos menores:
U+25B4
(Triângulo pequeno preto apontando para cima ▴)U+25C2
(Triângulo pequeno preto apontando para a esquerda ◂)U+25BE
(Preto pequeno triângulo apontando para baixo ▾)U+25B8
(Triângulo pequeno preto apontando para a direita)Também alguns brancos:
U+25C3
(Pequeno triângulo branco apontando para a esquerda ◃)U+25BF
(Pequeno triângulo branco apontando para baixo ▿)U+25B9
(Pequeno triângulo branco apontando para a direita ▹)U+25B5
(Pequeno triângulo branco apontando para cima ▵)Existem também alguns triângulos "pontudos". Você pode ler mais aqui na Wikipedia:
http://en.wikipedia.org/wiki/Geometric_Shapes
Mas, infelizmente, eles são todos Unicode em vez de ASCII. Se você ainda deseja usar o ASCII, pode usar um arquivo de imagem para apenas usar
^
ev
. (Assim como o Google Maps na versão para celular,isso se referia ao antigo Google Maps para celular)Como outros também sugeriram, você também pode criar triângulos com HTML, com bordas CSS ou formas SVG ou até telas JavaScript.
CSS
SVG
Javascript
Demo
fonte
Como você usa essas setas para alternar, convém criar essas setas com um elemento html usando os seguintes estilos, em vez de caracteres unicode.
http://jsfiddle.net/FrsGR/
fonte
:after
para criar bolhas de diálogo.Existem pontas de seta literais no bloco Spacing Modifier Letters :
fonte
˄
decimal ou decimal˄
. Mas se você tiver as codificações de página corretas, poderá copiá-las e colá-las no documento.Existem várias maneiras corretas de exibir um triângulo apontando para baixo.
Método 1: usar entidade HTML decimal
HTML:
Método 2: usar entidade HTML hexidecimal
HTML:
Método 3: usar caractere diretamente
HTML:
Método 4: usar CSS
HTML:
CSS:
Cada um desses três métodos deve ter a mesma saída. Para outros símbolos, existem as mesmas três opções. Alguns até têm uma quarta opção, permitindo que você use uma referência baseada em string (por exemplo,
♥
para exibir ♥).Você pode usar um site de referência como Unicode-table.com para descobrir quais ícones são suportados no UNICODE e com quais códigos eles correspondem. Por exemplo, você encontra os valores para o triângulo apontando para baixo em http://unicode-table.com/en/25BC/ .
Observe que esses métodos são suficientes apenas para ícones disponíveis por padrão em todos os navegadores. Para símbolos como ☃, ❄, ★, ☂, ☭, ⎗ ou ⎘, é muito menos provável que seja esse o caso. Embora seja possível fornecer suporte entre navegadores para outros símbolos UNICODE, o procedimento é um pouco mais complicado.
Se você quiser saber como adicionar suporte para caracteres UNICODE menos comuns, consulte Criar símbolos da web com símbolos de plano multilíngue suplementar Unicode para obter mais informações sobre como fazer isso.
Imagens de fundo
Uma estratégia totalmente diferente é o uso de imagens de fundo em vez de fontes. Para um desempenho ideal, é melhor incorporar a imagem no seu arquivo CSS, codificando-a como mencionado por exemplo. @ weasel5i2 e @Obsidian. Eu recomendaria o uso de SVG em vez de GIF, no entanto, é melhor para o desempenho e a nitidez dos seus símbolos.
Este código a seguir é a base64 para e a versão SVG do ícone:
Quando usar imagens de fundo ou fontes
Para muitos casos de uso, as imagens de plano de fundo e as fontes de ícone baseadas em SVG são amplamente equivalentes em relação ao desempenho e à flexibilidade. Para decidir qual escolher, considere as seguintes diferenças:
Imagens SVG
color
,font-size
,line-height
,background-color
ou outras regras de estilo relacionada fonte para alterar a exibição do seu ícone, mas você pode fazer referência a diferentes componentes do ícone como formas individualmente.Fontes de ícone
color
,font-size
,line-height
,background-color
ou outras regras de estilo relacionada fonte para alterar a exibição do íconePessoalmente, eu recomendo o uso de fundo-imagens somente quando você precisa de várias cores e os de cor não pode ser alcançado por meio de
color
,background-color
e outras regras CSS relacionadas às cores para fontes.O principal benefício do uso de imagens SVG é que você pode atribuir um estilo próprio aos diferentes componentes de um símbolo. Se você incorporar seu código XML SVG no documento HTML, isso é muito semelhante ao estilo do HTML. No entanto, isso resultaria em uma página da web que usa as tags HTML e SVG, o que poderia reduzir significativamente a legibilidade de uma página da web. Ele também adiciona inchaço extra se o símbolo for repetido em várias páginas e você precisar considerar que as versões antigas do IE não têm suporte limitado ou limitado ao SVG.
fonte
"Não ASCII (nem ↑ / ↓)" precisa de qualificação.
Embora esses caracteres não sejam definidos no Código Padrão Americano para o Intercâmbio de Informações como glifos, seus códigos foram comumente usados para fornecer uma apresentação gráfica dos códigos ASCII 24 e 25 (hex 18 e 19, CANcel e EM: End of Medium). A página de código 437 (denominada Extended ASCII da IBM, inclui os códigos numéricos 128 a 255) definiu o uso desses glifos como códigos ASCII e a onipresença dessas convenções permeava o setor como visto por sua implantação como padrões pelas empresas líderes como HP, particularmente para impressoras e IBM, particularmente para microcomputadores começando com o PC original.
Assim como o uso dos códigos ASCII para CAN e EM era relativamente obsoleto na época, justificando seu uso como glifos, o tempo passou também a usar os códigos como glifos obsoletos pelo uso atual das convenções UNICODE.
Deve-se enfatizar que as extensões para ASCII feitas pela IBM no Extended ASCII, incluíram não apenas um conjunto numérico maior para os códigos numéricos 128 a 255, mas também estenderam o uso de alguns códigos de controle numéricos, no intervalo ASCII de 0 a 32, de apenas protocolos de controle de transmissão de mídia para incluir glifos. Geralmente, supõe-se, incorretamente, que os primeiros 0 a 128 não foram "estendidos" e que a IBM estava usando os glifos do ASCII convencional para esse intervalo. Este erro também é cometido em uma das referências anteriores. Este erro tornou-se tão difundido que redefiniu coloquialmente ASCII subliminarmente.
fonte
Eu sei que estou atrasado para a festa, mas você também pode fazer isso com CSS simples:
HTML:
(Pode ser qualquer elemento HTML, se você estiver usando um elemento embutido como um,
<span>
por exemplo, certifique-se de torná-lo um elemento bloco / bloco embutido comdisplay:block;
oudisplay:inline-block
) :<div class="up"></div>
e
<div class="down"></div>
CSS:
Você também pode realizá-lo usando
:before
e:after
pseudo-elementos, o que é realmente uma maneira melhor desde que você evite a criação de marcação extra. Mas depende de você como você deseja realizá-lo.-
Aqui está uma demonstração no CodePen com muitas possibilidades de setas.
fonte
Muitas pessoas aqui estão sugerindo o uso dos triângulos, mas às vezes você precisa de uma divisa.
Tivemos um caso em que nosso botão mostra uma divisa e queríamos que o manual do usuário se referisse ao botão de uma maneira que também fosse reconhecida por um usuário não técnico. Então, precisávamos de um sinal de divisa.
Nós usamos ﹀ no final. É conhecido como FORMULÁRIO DE APRESENTAÇÃO PARA SUPORTE VERTICAL DE ÂNGULO DIREITO e seu código é U + FE40.
fonte
Geralmente, o melhor é ver um personagem em seu contexto.
Aqui está a lista completa de caracteres Unicode e como o seu navegador os exibe atualmente. Estou vendo essa lista evoluindo, versões de navegadores após outras.
Essa lista é obtida por iteração decimal da tabela unicode de entidades html, pode levar alguns segundos, mas é muito útil para mim em muitos casos.
Ao passar o mouse rapidamente sobre um determinado caractere, você obterá o dec, o hex e os atalhos para gerá-lo com um teclado.
O mesmo trecho de um bookmarklet:
Para gerar essa lista do php :
Para gerar essa lista no console, usando php :
Aqui está um extrato de texto sem formatação, de setas, algumas estão disponíveis com o unicode 10.0 . http://unicode.org/versions/Unicode10.0.0/
🔙🔚🔛🔜🔝🖗🖘🖙🖚🖛🖜🖝🖞🖟🞀🞁🞂🞃🔺🔻🔼🔽𝆒𝆓𐃘⭝⭞⭟⭠⭡⭢⭣⭤⭥⭦⭧⭨⭩⭪⭫⭬⭭⭮⭯⭰⭱⭲⭳⭶⭷ ⭸⭹⭺⭻⭼⭽⭾⭿⮀⮁⮂⮃⮄⮅⮆⮇⮈⮉⮊⮋⮌⮍⮎⮏⮐⮑⮒⮓⮔⮕⮘⮙⮚⮛⮜⮝⮞⮟⮠⮡⮢⮣⮤⮥⮦⮧⮨⮩⮪⮫ ⮬⮭⮮⮯⮰⮱⮲⮳⮴⮵⮶⮷⮸⮹⮽⮾⮿⯀⯁⯂⯅⯆⯇⯈⬶⬷⬸⬹⬺⬻⬼⬽⬾⬀⬁⬂⬃⬄⬅⬆⬇⬈⬉⬊⬋⬌⬍⬎⬏⬐ ⬑⤀⤁⤂⤃⤄⤅⤆⤇⤈⤉⤊⤋⤌⤍⤎⤏⤐⤑⤒⤓⤔⤕⤖⤗⤘⤙⤚⤛⤜⤝⤞⤟⤠⤡⤢⤣⤤⤥⤦⤧⤨⤩⤪⤫⤬⤭⤮⤯⤰ ⤱⤲⤳⤴⤵⤶⤷⤸⤹⤺⤻⤼⤽⤾⤿⥀⥁⥂⥃⥄⥅⥆⥇⥈⥉⥊⥋⥌⥍⥎⥏⥐⥑⥒⥓⥔⥕⥖⥗⥘⥙⥚⥛⥜⥝⥞⥟⥠⥡⥢ ⥣⥤⥥⥦⥧⥨⥩⥪⥫⥬⥭⥮⥯⥰⥱⥲⥳⥴⥵⟨⟩⟪⟫⟬⟭⟮⟯⟰⟱⟲⟳⟴⟵⟶⟷⟸⟹⟺⟻⟼⟽⟾⟿➘➙➚➛➜➝➞ ➣➤➥➦➧➨➩➪➫➬➭➮➯➰➱➲➳➴➵➶➷➸➹➺➻➼➽➾⊲⊳⊴⊵➢➣➤➥➦➧➨➩➪➫➬➭➮➯➰➱➲➳➴➵➶➷➸➹➺➻➼➽➾⊲⊳⊴⊵ ← ↑ → ↓ ↔↕↖↗↘↙↚↛↜↝ ↞↟↠↡↢↣↤↥↦↧↨↩↪↫↬↭↮↯↰↱↲↳↴↵↶↷↸↹↺↻↼↽↾↿⇀⇁⇂⇃⇄⇅⇆⇇⇈⇉⇊⇋⇌⇍⇎⇏ ⇐⇑⇒⇓⇔⇕⇖⇗⇘⇙⇚⇛⇜⇝⇞⇟⇠⇡⇢⇣⇤⇥⇦⇧⇨⇩⇪⇫⇬⇭⇮⇯⇰⇱⇲⇳⇴⇵⇶⇷⇸⇹⇺⇻⇼⇽⇾⇿ᐂᐃᐄᐅᐆᐇᐈᐉᐊᐋᐌᐍᐎᐏᐐᐑᐒᐓᐔᐕᐖᐗᐘᐙᐚᐛᐫᐬᐭᐮᐯᐰᐱᐲᐳᐴᐵᐶᐷᐸᐹᐺᐻᐼᐽᐾᐿᑀᑁᑂᑃᑄᑅᑆᑇᑈ🞀 🞁🞂🞃🠀🠁🠂🠃🠄🠅🠆🠇🠈🠉🠊🠋🠐🠑🠒🠓🠔🠕🠖🠗🠘🠙🠚🠛🠜🠝🠞🠟🠠🠡🠢🠣🠤🠥🠦🠧🠨🠩🠪🠫🠬🠭🠮🠯🠰🠱🠲 🠳🠴🠵🠶🠷🠸🠹🠺🠻🠼🠽🠾🠿🡀🡁🡂🡃🡄🡅🡆🡇🡐🡑🡒🡓🡔🡕🡖🡗🡘🡙🡠🡡🡢🡣🡤🡥🡦🡧🡨🡩🡪🡫🡬🡭🡮🡯🡰🡱🡲 🡳🡴🡵🡶🡷🡸🡹🡺🡻🡼🡽🡾🡿🢀🢁🢂🢃🢄🢅🢆🢇🢐🢑🢒🢓🢔🢕🢖🢗🢘🢙🢚🢛🢜🢝🢞🢟🢠🢡🢢🢣🢤🢥🢦🢧🢨🢩🢪🢫
fonte
Entidades HTML para triângulos vazios
◁ =
◁
▷ =
▷
▽ =
▽
△ =
△
fonte
▲ ▼ São U + 25B2 (
▲
) e U + 25BC (▼
), respectivamentefonte
Eu acho que o autor da pergunta pode estar se referindo a uma delas (veja a imagem em anexo) - eu encontrei essa pergunta do StackOverflow enquanto procurava a mesma coisa.
Infelizmente, esse glifo parece não existir como uma entidade de caractere distinto em lugar algum. A Wikipedia realiza isso abaixo usando javascript embutido e img content = "data: image / gif ..." para obter o símbolo.
Aliás, aqui está a base64 para isso:
Espero que isso ajude alguém!
fonte
Este parece implicar que 030 e 031 são triângulos para cima e para baixo.
(Como Bobince apontou, isso não parece ser um padrão ASCII)
fonte
Uso ▼ e ▲, mas eles podem não funcionar para você. Eu uso alt 11551 para o primeiro e 11550 para o segundo. Você sempre pode copiar e colá-los se o ascii não for o mesmo para o seu sistema.
fonte
Decidi que a maioria dos símbolos populares recomendados aqui (▼ e ▲) parece muito ousada; portanto, no site codepoints.net, recomendado pelo usuário ADJenks, encontrei esses símbolos que parecem melhores para o meu gosto: 🞀 (U + 1F780) 🞁 (U + 1F781) 🞂 (U + 1F782) 🞃 (U + 1F783)
fonte
O site que eu gosto de usar é o codepoints.net
Aqui está uma busca pelas palavras "ponta da seta" e "triângulo": https://codepoints.net/search?q=arrowhead+triangle
Ele tem algumas correspondências para "flechas com pontas de triângulo" que têm hastes, mas são apenas quatro páginas pequenas para percorrer e existem muitas correspondências boas com detalhes agradáveis em cada personagem.
Há também um bloco de código para "Símbolos e setas diversas" e este site os lista aqui: https://codepoints.net/miscundry_symbols_and_arrows
fonte
Aqui está outra - ᐞ - Unicode U + 141E / CANADIAN SYLLABICS GLOTTAL STOP
fonte