web-dev-qa-db-fra.com

Qu'est-ce que l'entité HTML pour une icône de recherche?

J'essaie de mettre une icône de recherche dans la barre de navigation de ma page Web, mais je ne souhaite pas utiliser l'image à cette fin. Existe-t-il une entité HTML pour une icône de recherche utilisée dans les moteurs de recherche ou les barres de recherche sur différents sites Web? Je sais que la plupart d'entre eux utilisent des images, mais existe-t-il une entité HTML pour cela?

Merci d'avance.

EDIT: je fournis le code

<li><a href="#search"> **SearchIconEntityToPutHere** </a>
  <ul>
  <li><form id="searchbar">
      <input type="text">
      </form></li>
 </ul>
</li>
csshtml-entities
17
Susan

[~ # ~] html [~ # ~]

Utilisation &#128269; pour ???? et &#128270; pour ????

CSS (chaîne de contenu)

Utilisation '\1F50D' pour ???? et '\1F50E' pour ????

Comme indiqué dans les commentaires, cela dépend de la prise en charge des polices et de l'unicode.

Je vous suggère de vous en tenir à utiliser une image ou une feuille Sprite à cet effet pour vous assurer qu'elle est prise en charge.

Mise à jour: polices

Une nouvelle méthode pour cela consiste à utiliser des cadres de polices spéciaux, qui utilisent une combinaison de polices Web et de classes d'assistance CSS. Un exemple est Font Awesome (l'exemple ci-dessous utilise icône de recherche ):

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

L'utilisation de cette méthode a l'avantage d'avoir quelque chose qui peut être redimensionné sans changement de qualité, ainsi que d'être soumis à des règles CSS comme tout autre texte, donc des règles comme color et text-shadow peut l'affecter.

32
Dissident Rage

Que diriez-vous d'utiliser css et html uniquement? Voici ce que j'ai fait (peut être amélioré):

<!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>
4
Peristilo peris

Il n'y a pas d'entité HTML qui pourrait raisonnablement être considérée comme désignant une "icône de recherche".

Selon ce que vous entendez par "icône de recherche", il peut y avoir ou non un caractère Unicode qui le représente. Voir Y a-t-il un symbole de glyphe Unicode pour représenter "Recherche" . S'il y en a un, alors il peut être écrit comme une référence de caractère en HTML, bien que ce soit plutôt immatériel; l'important est que la plupart des polices ne le contiennent pas.

0
Jukka K. Korpela