Gibt es ein Unicode-Glyphen-Symbol für "Suche" [geschlossen]


191

Unicode hat eine Million symbolähnlicher Glyphen, aber sie sind sehr schwer zu suchen.

Gibt es eine Unicode-Glyphe, die wie ein "Fernglas" oder eine "Lupe" aussieht? Oder gibt es ein Symbol für "Suche" in Unicode?



4
Sie können eine Folge von Glyphen verwenden: U + 0053, U + 0065, U + 0061, U + 0072, U + 0063, U + 0068 8-)}
Keith Thompson

1
Wenn diese andere Frage geschlossen war, sollte dies auch der Fall sein.
Ciro Santilli 31 冠状 病 六四 事件 31

Ich bin mir nicht sicher, ob svg es für Sie tut, aber das habe ich verwendet. Sie können die Farbe des Strichattributs ändern. <svg style = "height: 1em;" viewBox = "0 0 12 13"> <g Strichbreite = "2" Strich = "# 999999" fill = "keine"> <Pfad d = "M11.29 11.71l-4-4" /> <Kreis cx = "5" cy = "5" r = "4" /> </ g> </ svg>
Hühner

Antworten:


204

Es gibt U + 1F50D LINKSPUNKT-VERGRÖSSERUNGSGLAS (🔍) und U + 1F50E RECHTSPUNKT-VERGRÖSSERUNGSGLAS (🔎).

Sie sollten (in HTML) &#x1F50D;oder verwenden&#x1F50E;

Sie werden jedoch von vielen Schriftarten nicht unterstützt (fileformat.info listet nur einige Schriftarten auf, die den Codepoint mit einem richtigen Glyphen unterstützen).

Beachten Sie auch, dass sie sich außerhalb des BMP befinden , sodass einige Unicode-fähige Software möglicherweise Probleme beim Rendern haben, selbst wenn sie Schriftarten haben, die sie unterstützen.

Im Allgemeinen können Unicode-Glyphen mithilfe einer Site wie fileformat.info durchsucht werden . Dies sucht "nur" in den Namen und Eigenschaften der Unicode-Glyphen, aber sie enthalten normalerweise genügend Metadaten, um gute Suchergebnisse zu ermöglichen (für diese Antwort habe ich nach "Glas" gesucht und zum Beispiel die resultierende Liste durchsucht).


7
@Prasad Jadhav, das Unicode-Support-Problem ist heutzutage meistens ein Schriftartenproblem, und es ist wirklich eine andere Frage. Für so seltene Zeichen (in Schriftarten) wie diese @font faceist wahrscheinlich eine eingebettete Schriftart ( ) die einzige Option und etwas problematisch (da Symbola eine so große Schriftart ist). Die Zeichen erscheinen auch in Quivira (Version 3.7) und Segoe UI Symbol (Version 5.01), aber das ist immer noch eine sehr begrenzte Anzahl von Schriftarten. Quivira ist eine kostenlose Schriftart. Das Segoe UI-Symbol wird mit Windows 7 geliefert und ermöglicht das bearbeitbare Einbetten.
Jukka K. Korpela

21
Darf ich "Telefonrekorder" U + 2315 empfehlen : ? Es hat nichts damit zu tun, ähnelt aber irgendwie einer Lupe und scheint in Standardschriftarten enthalten zu sein, wo U + 1F50D und U + 1F50E dies nicht tun.
Zopieux

1
Arial (unter Windows) unterstützt auch die "links zeigende Lupe"
Spinal

1
Für diejenigen, die neugierig sind, wird es auf Chromebooks in Farbe gerendert
LB--

5
Wenn Sie keine Färbung wünschen, verwenden Sie den Unicode-Variationswähler 15 danach und er wird stattdessen als 🔎︎
pfg

123

Verwenden Sie das Symbol ⚲ (als &#9906;oder codiert &#x26B2;) und drehen Sie es, um den gewünschten Effekt zu erzielen:

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

Es dreht ein Symbol :)


1
Nun, es geht darum, eine Glyphe auf Textbasis zu haben, und das Symbol sieht viel besser aus als das Unicode. +1.
Niloct

1
@Niloct Es ist eine HTML-Antwort. Ich kann nicht sehen, dass die Frage HTML-spezifisch ist. In xaml würden Sie so etwas tun <Grid.RenderTransform><CompositeTransform Rotation="-45" /></Grid.RenderTransform>. Nehmen wir Webprogrammierung jetzt als selbstverständlich an, wenn wir eine Unicode-Frage stellen?
John

3
Unter Linux (Ubuntu) sieht es sehr gut aus, aber wenn ich Windows benutze, kann ich nur ein Quadrat sehen.
Eliasz Kubala

6
Das heißt neutral im Sinne von "weder männlich noch weiblich". Wenn Sie ein Zeichen nur für seine Glyphe verwenden möchten, sollten Sie es besser in eine Schriftart einfügen, die irgendwo im Bereich für den privaten Gebrauch zugewiesen ist, oder ein PNG verwenden, anstatt "weder männlich noch weiblich" zu sagen und dann anzuwenden ein Stil, damit es aussieht wie 🔍oder 🔎.
Jon Hanna

1
Das hat bei mir sehr gut funktioniert. Ich habe <span class='icn icn-find'></span>damals ein CSS gemacht .icn-find:after { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); display: block; content: "\26B2"; }. Funktioniert super!
Teewuane

61

Ich würde empfehlen, http://shapecatcher.com/ zu verwenden, um nach Unicode-Zeichen zu suchen. Sie können die gewünschte Form zeichnen und dann die Übereinstimmungen auflisten, die dieser Form am nächsten kommen.


10
Das ist ein großartiges Werkzeug. Es ist meistens, Fragen und
Antworten

8
Ich habe eine Lupe gefunden. Versuchen Sie besser zu zeichnen: p
vsync

1
Ich habe hier einige schöne Bilder und Charaktere gefunden: charbase.com/block/miscellaneous-symbols-and-pictographs
Sebastian

sehr schönes Werkzeug, findet aber keine Lupe / Suchsymbol, keine Liste von Zeichen und leider nicht aktualisiert seit 2012
Mousey

30

Wird in Chrome OS korrekt angezeigt - Screenshots von diesem System.

tibetisches Sternzeichen sgra gcan -char rtags U + 0F17U + 0F17

Telefonrekorder (U + 2315)U + 2315

Lepcha Buchstabe gla (U + 1C04)U + 1C04


Zeichencode posten? es wird nicht angezeigt
Mousey

1
@ Mausy hinzugefügt Codes und Screenshots
Vitaly Zdanevich

14
OMG, zuerst habe ich mich gefragt, warum Sie dort einen durchgestrichenen Arsch für eine Lösung stecken ...
Thomas Weller

Dies ist die beste Antwort. Die Lupe sieht toll aus. Im Jahr 2018 werden alle Unicode-Zeichen durch die Umwandlung in Emojis durcheinander gebracht. Ich habe es so für ein Suchformular verwendet:#searchform:after { content: "\002315"; margin-left: -24px; }
Ciprian

1
Danke dir. U + 2315 arbeitete in einer JSF-XML-basierten Markup-Ansicht (RichFaces) wie folgt: <a4j: commandButton value = "# {someBooleanExpr? '& # X25bc;' : '& # x2315;'} "/>
Lisa

6

Sie können dieses CSS einfach zu Ihrer Kopfzeile hinzufügen

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

Fügen Sie als Nächstes diesen Code an der Stelle hinzu, an der Sie ein Glyphensymbol anzeigen möchten.

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

Habe Spaß.


1
Das Hinzufügen weiterer CSS-Dateien zum Header verlangsamt das Laden der Seite. CSS-Dateien blockieren das Rendern.
Tinkerr

Sie können nur einen wichtigen Teil dieser Datei hinzufügen, wenn Sie sich für das Rendern interessieren.
Eliasz Kubala

2
Counter-Downvoting mit CSS-Schriftarten ist eigentlich sehr sinnvoll, insbesondere wenn Sie feststellen, dass Sie immer mehr Symbole benötigen.
rr-

Ich bin auf dieser Seite angekommen und habe nach einem "Symbol" gesucht, das in Platzhaltern (innerhalb eines <input>) platziert werden kann. Daher ist dies nur eine Lösung für Fälle, in denen Sie HTML verwenden können.
Armfoot

Upvote für FontAwesome. Tonnenweise freie Glyphen für das Web. Sehr hilfreich.
PRMan
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.