要在按钮中添加搜索图标,您可以使用HTML和CSS来实现
<i>
或<span>
):<button class="search-btn">
<i class="icon-search"></i>搜索
</button>
::before
或::after
添加搜索图标。这里我们使用Font Awesome图标库中的一个搜索图标为例:.search-btn {
position: relative;
padding-left: 30px; /* 留出图标的空间 */
padding-right: 30px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
font-size: 16px;
padding: 8px 15px;
}
/* 使用Font Awesome搜索图标 */
.search-btn::before {
content: "\f002"; /* 这是Font Awesome搜索图标的Unicode值 */
font-family: "Font Awesome 5 Pro"; /* 指定Font Awesome图标库 */
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
font-size: 18px;
}
注意:这个示例使用了Font Awesome图标库,您需要在HTML文件的<head>
部分引入相应的链接:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
现在,您应该看到按钮上有一个搜索图标。您可以根据需要自定义按钮的样式,例如更改背景颜色、边框等。
领取专属 10元无门槛券
手把手带您无忧上云