搜索图标的HTML实体是什么？
搜索图标的HTML实体是什么？
提问于 2014-03-06 00:04:36
我正试着在我网页的导航栏里放一个搜索图标，但我不愿意使用图片。在不同网站的搜索引擎或搜索栏中使用的搜索图标是否有HTML实体。我知道他们中的大多数都使用图片，但是有没有HTML实体来支持它呢？
提前谢谢。
编辑:我提供了代码
<li><a href="#search"> **SearchIconEntityToPutHere** </a>
<ul>
<li><form id="searchbar">
<input type="text">
</form></li>
</ul>
</li>回答 3
Stack Overflow用户
回答已采纳
发布于 2014-03-06 00:32:43
HTML
将🔍用于🔍，将🔎用于🔎
CSS (内容字符串)
将'\1F50D'用于🔍，将'\1F50E'用于🔎
正如注释中所指出的，这取决于字体和unicode支持。
我建议您坚持使用图像或精灵工作表，以确保它得到支持。
字体更新: Fonts
一种新的方法是通过使用特殊的字体框架，它使用web字体和CSS辅助类的组合。一个示例是Font Awesome (下面的示例使用search icon)：
<i class="fas fa-search" aria-hidden="true"></i>使用这种方法的好处是，可以在不改变质量的情况下调整内容的大小，并且像任何其他文本一样受到CSS规则的约束，因此color和text-shadow等规则可以影响它。
Stack Overflow用户
发布于 2016-08-18 14:42:16
如果只使用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>Stack Overflow用户
发布于 2014-03-06 02:36:34
没有任何HTML实体可以被合理地视为表示“搜索图标”。
根据您所说的“搜索图标”是什么意思，可能有也可能没有表示它的Unicode字符。参见Is there Unicode glyph Symbol to represent "Search"。如果有，那么它可以写为HTML中的字符引用，尽管这相当无关紧要；重要的是大多数字体都不包含它。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22202890
复制相关文章
相似问题
腾讯云开发者
