Existe um símbolo de glifo Unicode para representar a "Pesquisa" [fechada]

191

O Unicode possui um milhão de glifos semelhantes a ícones, mas é muito difícil pesquisar.

Existe um glifo Unicode que se parece com um "binóculo" ou "lupa"? Ou existe um símbolo usado para significar "Pesquisa", que está em Unicode?

Prasad Jadhav
fonte
4
Você pode usar uma sequência de glifos: U + 0053, U + 0065, U + 0061, U + 0072, U + 0063, U + 0068 8-)}
Keith Thompson
1
Se essa outra pergunta foi encerrada, esta deveria ser a mesma.
Ciro Santilli respondeu
Não tenho certeza se o svg faz isso por você, mas é isso que eu usei, você pode alterar a cor do atributo stroke. <svg style = "height: 1em;" viewBox = "0 0 12 13"> <g largura do traço = "2" traço = "# 999999" fill = "none"> <caminho d = "M11.29 11.71l-4-4" /> <circle cx = "5" cy = "5" r = "4" /> </g> </svg>
galinhas

Respostas:

204

Há o VIDRO MAGNIFICADOR DE PONTA ESQUERDA U + 1F50D (🔍) e o VIDRO MAGNIFICADOR DE PONTA DIREITA U + 1F50D (🔎).

Você deve usar (em HTML) &#x1F50D;ou&#x1F50E;

No entanto, eles não são suportados por muitas fontes (fileformat.info lista apenas algumas fontes como suportando o Codepoint com um glifo adequado).

Observe também que eles estão fora do BMP ; portanto, alguns softwares compatíveis com Unicode podem ter problemas para renderizá-los, mesmo que tenham fontes que os suportem.

Geralmente, os glifos Unicode podem ser pesquisados ​​usando um site como fileformat.info . Isso pesquisa "apenas" nos nomes e propriedades dos glifos Unicode, mas geralmente contém metadados suficientes para permitir bons resultados de pesquisa (para esta resposta, procurei por "glass" e naveguei na lista resultante, por exemplo)

Joachim Sauer
fonte
7
@Prasad Jadhav, a questão do suporte a Unicode é hoje um problema de fonte e é realmente uma questão diferente. Para caracteres tão raros (em fontes) como esses, uma fonte incorporada ( @font face) é provavelmente a única opção e um tanto problemática (já que o Symbola é uma fonte tão grande). Os caracteres também aparecem no Quivira (versão 3.7) e no Segoe UI Symbol (versão 5.01), mas esse ainda é um conjunto muito limitado de fontes. Quivira é uma fonte gratuita, o Segoe UI Symbol é fornecido com o Windows 7 e permite incorporação editável.
Jukka K. Korpela
21
Posso recomendar "Gravador de telefone" U + 2315 :? É totalmente independente, mas se parece com uma lupa e parece estar incluído em fontes padrão, onde U + 1F50D e U + 1F50E não.
Zopieux 18/06/2013
1
Arial (no Windows) também suporta a "lupa apontando esquerda"
Spinal
1
Para os curiosos, é renderizado em cores nos Chromebooks: i.imgur.com/86b0a2o.png
LB-- 8/15
5
Se você não quiser coloração, use o seletor de variação unicode 15 depois e ele aparecerá como 🔎︎
pfg
123

Use o símbolo ((codificado como &#9906;ou &#x26B2;) e gire-o para obter o efeito desejado:

<div style="-webkit-transform: rotate(45deg); 
               -moz-transform: rotate(45deg); 
                 -o-transform: rotate(45deg);
                    transform: rotate(45deg);">
    &#9906;
</div>

Gira um símbolo :)

Ricky
fonte
1
Bem, o objetivo é ter um glifo baseado em texto, e o símbolo é muito mais bonito que o unicode. +1.
Niloct 29/01
1
@Niloct É uma resposta html. Não vejo a pergunta como específica para html. No xaml você faria algo parecido <Grid.RenderTransform><CompositeTransform Rotation="-45" /></Grid.RenderTransform>. Estamos tomando a programação da Web como garantida agora ao fazer uma pergunta unicode?
John
3
No Linux (Ubuntu) parece muito bom, mas quando eu uso o Windows, só consigo ver um quadrado.
Eliasz Kubala 10/09
6
Isso significa neutro no sentido "nem masculino nem feminino". Se você usar um caractere apenas pelo glifo, é melhor colocá-lo em uma fonte atribuída em algum lugar da Área de Uso Privado ou usar um PNG, em vez de dizer "nem homem nem mulher" e aplicar um estilo para fazer parecer 🔍ou 🔎.
Jon Hanna
1
Isso funcionou muito bem para mim. Eu fiz um <span class='icn icn-find'></span>então o css era .icn-find:after { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); display: block; content: "\26B2"; }. Funciona bem!
teewuane
61

Eu recomendo usar http://shapecatcher.com/ para ajudar a procurar caracteres unicode. Ele permite que você desenhe a forma que deseja e depois lista as correspondências mais próximas dessa forma.

john holt ripley
fonte
10
essa é uma ferramenta incrível. é principalmente encontrar Q os o quando eu tente procurar por uma lupa, mas ainda ... muito doce ferramenta
redbmk
8
Encontrei lupa. Tente desenhar melhor: p
vsync
1
Eu encontrei algumas boas imagens e caracteres aqui: charbase.com/block/miscellaneous-symbols-and-pictographs
Sebastian
ferramenta muito boa, mas não encontra um ícone de lupa / pesquisa, nenhuma lista de caracteres e, infelizmente, não é atualizada desde 2012
Mousey
30

Exibido correto no Chrome OS - capturas de tela deste sistema.

signo astrológico tibetano sgra gcan -char rtags U + 0F17U + 0F17

gravador de telefone (U + 2315)U + 2315

carta lepcha gla (U + 1C04)U + 1C04

Vitaly Zdanevich
fonte
postar o código do personagem? ele não exibir
Mousey
1
@Mousey adicionou códigos e capturas de tela
Vitaly Zdanevich 16/15
14
OMG, primeiro eu me perguntei por que você colocar um rabo tachado lá para uma solução ...
Thomas Weller
Esta é a melhor resposta. A lupa parece incrível. Em 2018, todos os personagens unicode ficam confusos ao serem transformados em emojis. Eu usei-o como este para um formulário de pesquisa:#searchform:after { content: "\002315"; margin-left: -24px; }
Ciprian
1
Obrigado. U + 2315 trabalhou em uma visualização de marcação baseada em xml do JSF (RichFaces) da seguinte maneira: <a4j: commandButton value = "# {someBooleanExpr? '& # X25bc;' : '& # x2315;'} "/>
Lisa
6

Você pode simplesmente adicionar esse CSS ao seu cabeçalho

<link href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet' type='text/css'>

Em seguida, adicione esse código no local em que deseja exibir um símbolo de glifo.

<div class="fa fa-search"></div> <!-- smaller -->
<div class="fa fa-search fa-2x"></div> <!-- bigger -->

Diverta-se.

Eliasz Kubala
fonte
1
Adicionar mais arquivos CSS ao cabeçalho diminui o carregamento da página. Os arquivos CSS estão bloqueando a renderização.
Tinkerr 11/03/15
Você pode adicionar apenas parte importante deste arquivo se você se preocupa com a renderização.
Eliasz Kubala
2
Contra-voto negativo, o uso de fontes css é realmente muito razoável, especialmente quando você precisa de mais e mais ícones.
RR
Cheguei a esta página procurando um "ícone" que pudesse ser colocado em espaços reservados (dentro de um <input>); portanto, essa é apenas uma solução para os casos em que você pode usar HTML.
Armfoot
Voto a favor para FontAwesome. Toneladas de glifos gratuitos para a web. Muito útil.
PRMan