web-dev-qa-db-ja.com

検索アイコンのHTMLエンティティとは何ですか？

Webページのナビゲーションバーに検索アイコンを配置しようとしていますが、その目的で画像を使用するつもりはありません。さまざまなWebサイトの検索エンジンまたは検索バーで使用される検索アイコンのHTMLエンティティはありますか。私はそれらのほとんどが画像を使用していることを知っていますが、それにHTMLエンティティはありますか？

前もって感謝します。

編集：私はコードを提供しています

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

[〜＃〜] html [〜＃〜]

????には&#128269;を、????には&#128270;を使用します

CSS（コンテンツ文字列）

????には'\1F50D'を、????には'\1F50E'を使用します

コメントで述べたように、これはフォントとユニコードのサポートに依存します。

この目的のために、画像またはスプライトシートを使用して、サポートされていることを確認することをお勧めします。

更新：フォント

このための新しい方法は、WebフォントとCSSヘルパークラスの組み合わせを使用する特別なフォントフレームワークを使用することです。一例は Font Awesome です（以下の例では search icon を使用しています）：

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

この方法を使用すると、他のテキストと同様にCSSルールの影響を受けるだけでなく、品質を変更せずにサイズを変更できるという利点があるため、colorやtext-shadowなどのルールが影響を与える可能性があります。

32
Dissident Rage

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

「検索アイコン」を意味すると合理的に見なすことができるHTMLエンティティはありません。

「検索アイコン」の意味によって、それを表すUnicode文字がある場合とない場合があります。 「検索」を表すUnicodeグリフシンボルはありますか を参照してください。ある場合は、HTMLでは文字参照として記述できますが、これは重要ではありません。重要なことは、ほとんどのフォントには含まれていないということです。

0
Jukka K. Korpela