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>
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".
To insert an icon, add the name of the icon class to any inline HTML element. The <i> and <span> elements are widely used to add icons.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With