What is the HTML entity for a search icon?

Susan picture Susan ยท Mar 5, 2014 ยท Viewed 59.1k times ยท Source

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>

Answer

Dissident Rage picture Dissident Rage ยท Mar 5, 2014

HTML

Use &#128269; for ๐Ÿ” and &#128270; 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.