Что такое объект HTML для значка поиска?

Я пытаюсь поместить значок поиска в панель навигации моей веб-страницы, но я не хочу использовать изображение для этой цели. Есть ли объект HTML для значка поиска, который используется в поисковых системах или в поисковых барах на разных сайтах. Я знаю, что большинство из них используют изображения, но есть ли для него какой-либо объект HTML?

Спасибо заранее.

EDIT: я предоставляю код

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

Ответ 1

HTML

Используйте 🔍 для & # 128269; и 🔎 для & # 128270;

CSS (строка содержимого)

Используйте '\1F50D' для & # 128269; и '\1F50E' для & # 128270;

Как отмечено в комментариях, это зависит от шрифта и поддержки юникода.

Я рекомендую вам использовать изображение или спрайт для этой цели, чтобы обеспечить его поддержку.

Обновление: шрифты

Новый метод для этого - использование специальных каркасов шрифтов, которые используют комбинацию веб-шрифтов и классов-помощников CSS. Одним из примеров является Font Awesome (в приведенном ниже примере используется значок поиска):

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

Преимущество этого метода заключается в том, что его можно изменять без изменения качества, а также применять правила CSS, как и любой другой текст, поэтому такие правила, как color и text-shadow, могут влиять на него.

Ответ 2

Как насчет использования только css и html? Это то, что я сделал (можно улучшить):

<!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>

Ответ 3

Не существует HTML-объекта, который можно было бы разумно расценивать как обозначение "значка поиска".

В зависимости от того, что вы подразумеваете под "значком поиска", может быть или не быть символ Юникода, который его представляет. См. Есть ли символ символа Юникода для представления "Поиск" . Если есть, то он может быть записан как ссылка на символ в HTML, хотя это довольно несущественно; важно, чтобы большинство шрифтов не содержали его.