What is the HTML entity for a search icon?

Question

I'm trying to put a search icon in the navigation bar of my webpage but I'm not willing to use image for the purpose. Is there a HTML entity for a search icon used in search engines or search bars in different websites. I know most of them use images but is there any HTML entity for it?

Thanks in advance.

EDIT: I am providing the code

<li><a href="#search"> **SearchIconEntityToPutHere** </a>
  <ul>
  <li><form id="searchbar">
      <input type="text">
      </form></li>
 </ul>
</li>

Unicode : http://stackoverflow.com/questions/12036038/is-there-unicode-glyph-symbol-to-represent-search or http://shapecatcher.com/unicode/info/128269 — Paulie_D, Mar 05 '14 at 16:06
I also don't think there is an HTML enitity for that. for an icon I think you need an icon, examples here: http://stackoverflow.com/questions/19945281/html-button-with-search-icon @Pauli_D good link! — caramba, Mar 05 '14 at 16:07
Thank you so much. But unfortunately,it's not widely supported. Even my browser doesn't support these. — Susan, Mar 05 '14 at 16:25
@Susan now it gets hard to help. please show the code you have so far which is not working. an icon is supported in every browser even yours — caramba, Mar 05 '14 at 16:29
I have added the code. However,when I put the character entity provided by few users, I only see boxes. For example,when I put ⚲ it is supposed to show this symbol (⚲),but it doesn't. — Susan, Mar 05 '14 at 17:03

Dissident Rage · Accepted Answer · 2019-10-15T01:03:10.073

42

HTML

Use 🔍 for 🔍 and 🔎 for 🔎

CSS (content string)

Use '\1F50D' for 🔍 and '\1F50E' for 🔎

As noted in comments, this depends on font and unicode support.

I suggest you stick with using an image or sprite sheet for this purpose to ensure that it's supported.

Update: Fonts

A new method for this is through the use of special font frameworks, which use a combination of web fonts and CSS helper classes. One example is Font Awesome (the example below uses the search icon):

<i class="fas fa-search" aria-hidden="true"></i>

Using this method has the benefit of having something that can be resized without a change in quality, as well as being subject to CSS rules like any other text, so rules like color and text-shadow can affect it.

edited Oct 15 '19 at 01:03

answered Mar 05 '14 at 16:32

Dissident Rage

2,610
1
27
33

I'm sorry but I only see boxes. How do I fix this problem? Thank you. – Susan Mar 05 '14 at 16:58
2

You make sure you are using a font that has a glyph for that character. – Quentin Mar 05 '14 at 17:01
3

That you can't see them demonstrates the problem that people addressed in the comments. You need to be on an OS/browser that supports unicode and have a font that includes those characters. http://i.imgur.com/Yu1wjcu.png – Dissident Rage Mar 05 '14 at 17:02
Thank you so much. I understand now. I guess it's a better idea to use a png image for the purpose. – Susan Mar 05 '14 at 17:09

score 5 · Answer 2 · answered Aug 18 '16 at 06:42

How about using css and html only? This is what I did (can be improved):

<!DOCTYPE html>
<html>
    <head>
        <meta charset= "UTF-8">
        <title> A css trick </title>
        <style type="text/css">
             body{
            background-size: 100%; 
            background-color: #000; 
            color: orange;
            font-size: 18px;
            margin: 0 auto;
            text-align: center;         
            }
            #search_box{width: 60px; position: relative; margin: 0 auto; transform: rotate(26deg)}
            #search{width:10px; height: 10px; border: 3px solid #f5f5f5; border-radius: 10px; float: left;}
            #cabe{width: 8px;display: block; border: 2px solid #fff;color: #f6f6f6; font-weight: bold; text-shadow: 2px 0px #fff; position: absolute; top: 6px; left: 13px; font-size: 16px; border-radius: 10px;}

        </style> 
    </head>
    <body>
        <h1>CSS TRICK</h1>
        <div id="search_box"><div id="search"></div><span id="cabe"></span></div>

    </body>  

</html>

score 0 · Answer 3 · edited May 23 '17 at 12:34

There is no HTML entity that could be reasonably regarded as denoting a “search icon”.

Depending on what you mean by “search icon”, there may or may not be a Unicode character that represents it. See Is there Unicode glyph Symbol to represent "Search". If there is, then it can be written as a character reference in HTML, though this is rather immaterial; the important thing is that most fonts would not contain it.

What is the HTML entity for a search icon?

3 Answers3