Question

我正在尝试在我的网页的导航栏中放置一个搜索图标，但我不愿意将图像用于此目的。是否有搜索引擎中使用的搜索图标的HTML实体或不同网站中的搜索栏。我知道他们中的大多数都使用图像，但它有任何HTML实体吗？

提前致谢。

编辑：我提供的代码

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

Answer 1

<强> HTML

将🔍用于?，将🔎用于?

CSS（内容字符串）

将'\1F50D'用于?，将'\1F50E'用于?

如评论中所述，这取决于字体和unicode支持。

我建议您坚持使用图像或精灵表来确保它得到支持。

更新：字体

一种新的方法是使用特殊的字体框架，它使用Web字体和CSS帮助程序类的组合。一个示例是Font Awesome（以下示例使用search icon）：

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

使用此方法的好处是可以在不改变质量的情况下调整大小，以及像其他任何文本一样遵循CSS规则，因此color和text-shadow之类的规则可以影响它。

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

Answer 3

没有 HTML实体可以合理地视为表示“搜索图标”。

根据“搜索图标”的含义，可能有也可能没有代表它的Unicode字符。见Is there Unicode glyph Symbol to represent "Search"。如果有，那么它可以在HTML中写成字符引用，尽管这是相当无关紧要的;重要的是大多数字体都不包含它。

搜索图标的HTML实体是什么？

3 个答案: