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

Question

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

21

我正在尝试在网页的导航栏中放置一个搜索图标，但是我不想使用图像。有没有用于搜索引擎或不同网站搜索栏中的搜索图标的 HTML 实体？我知道大多数网站使用图像，但是否存在任何 HTML 实体来代替它？

提前感谢您的回答。

编辑：我将提供代码。

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

- Susan

3

Unicode: https://dev59.com/z2ct5IYBdhLWcg3whtqh 或 http://shapecatcher.com/unicode/info/128269Unicode是一种用于表示文本字符和符号的编码标准。这个编码标准包含了世界上几乎所有的文字系统，以及许多特殊符号，如图形、数学符号、货币符号等。链接中提到的Unicode字符是用于表示搜索符号的符号。可以在网页上使用该字符，使用户更方便地找到搜索框。 - Paulie_D

1

我也不认为有一个适用于该图标的HTML实体。对于一个图标，我认为你需要一个图标，这里有一些例子：https://dev59.com/snnZa4cB1Zd3GeqPlhJT @Pauli_D 不错的链接！ - caramba

非常感谢。但不幸的是，它并没有得到广泛支持。甚至我的浏览器也不支持这些。 - Susan

@Susan，现在帮助变得困难了。请展示你目前有的代码，说明哪里出了问题。每个浏览器都支持图标。 - caramba

我已经添加了代码。但是，当我输入一些用户提供的字符实体时，我只能看到方框。例如，当我输入 ⚲ 时，它应该显示这个符号 (⚲)，但它没有显示出来。 - Susan

3个回答

5

如何仅使用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>

- Peristilo peris

0

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

根据你对“搜索图标”的理解，可能有可能没有一个Unicode字符来代表它。参见是否有Unicode字符表示“搜索”。如果有的话，它可以被写成HTML中的一个字符引用，尽管这并不重要；最重要的是大多数字体都不包含它。

- Jukka K. Korpela

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dissident Rage · Accepted Answer

HTML

使用🔍代表🔍，使用🔎代表🔎

CSS（内容字符串）

使用'\1F50D'代表🔍，使用'\1F50E'代表🔎

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

我建议您坚持使用图像或精灵表来实现此目的，以确保其得到支持。

更新：字体

使用特殊字体框架是一种新方法，它使用网页字体和CSS帮助类的组合。一个例子是Font Awesome（下面的示例使用搜索图标）：

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

使用这种方法的好处是可以调整大小而不会影响质量，同时像其他文本一样受 CSS 规则的控制，因此像 color 和 text-shadow 这样的规则也可以影响它。