什么是搜索图标的 HTML 实体

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

提前谢谢。

编辑：我正在提供代码

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

HTML

将 🔍 用于🔍和🔎 🔎用于

CSS（内容字符串）

将 '1F50D' 用于🔍和'1F50E' 🔎用于

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

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

更新：字体

实现此目的的新方法是使用特殊的字体框架，这些框架使用 Web 字体和 CSS 帮助程序类的组合。一个例子是Font Awesome（下面的示例使用搜索图标）：

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

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

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

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

根据您所说的"搜索图标"的含义，可能有也可能没有表示它的 Unicode 字符。请参阅是否有 Unicode 字形符号来表示"搜索"。如果有，那么它可以写成 HTML 中的字符引用，尽管这无关紧要;重要的是大多数字体不会包含它。

相关内容

最新更新

热门标签：