What is the HTML entity for a search icon?
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.
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>