搜索图标的 HTML 实体是什么？ [复制]答案

【问题标题】：What is the HTML entity for a search icon? [duplicate]搜索图标的 HTML 实体是什么？ [复制]
【发布时间】：2014-04-07 19:32:27
【问题描述】：

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

提前致谢。

编辑：我提供代码

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

【问题讨论】：

Unicode : stackoverflow.com/questions/12036038/… 或 shapecatcher.com/unicode/info/128269
我也不认为有一个 HTML 实体。对于一个图标，我认为您需要一个图标，示例如下：stackoverflow.com/questions/19945281/…@Pauli_D 好链接！
非常感谢。但不幸的是，它没有得到广泛的支持。连我的浏览器都不支持这些。
@Susan 现在很难提供帮助。请显示您目前无法使用的代码。每个浏览器都支持一个图标，甚至您的浏览器
我已经添加了代码。但是，当我放置少数用户提供的字符实体时，我只看到框。例如，当我把 ⚲它应该显示这个符号（⚲），但它没有。

标签： css html-entities

【解决方案1】：

HTML

将&#128269; 用于?，&#128270; 用于?

CSS（内容字符串）

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

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

我建议您坚持为此使用图像或精灵表，以确保它受到支持。

更新：字体

一种新的方法是使用特殊的字体框架，它结合了网络字体和 CSS 帮助类。一个例子是Font Awesome（下面的例子使用search icon）：

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

使用这种方法的好处是可以在不改变质量的情况下调整大小，并且像任何其他文本一样受 CSS 规则的约束，因此 color 和 text-shadow 等规则会影响它。

【讨论】：

对不起，我只看到盒子。我该如何解决这个问题？谢谢。
确保您使用的字体具有该字符的字形。
您看不到它们说明了人们在 cmets 中解决的问题。您需要使用支持 unicode 并具有包含这些字符的字体的操作系统/浏览器。 i.imgur.com/Yu1wjcu.png
非常感谢。我现在知道了。我想为此目的使用 png 图像是一个更好的主意。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

只使用 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>

【讨论】：