在使用CSS設計網頁時，經常需要設計查詢按鈕，并且為其添加查詢圖標。以下是一些常用的查詢按鈕和查詢圖標的樣式代碼。

/*查詢按鈕的樣式*/
button.search-btn {
background-color: #4CAF50; /*按鈕的背景顏色*/
color: white; /*按鈕的文字顏色*/
border: none; /*去掉按鈕的邊框*/
padding: 10px 20px; /*設置按鈕的內邊距*/
text-align: center; /*文字居中對齊*/
text-decoration: none; /*去掉文字的下劃線*/
display: inline-block; /*將按鈕設置為inline-block元素，使其可以在一行內顯示*/
font-size: 16px; /*設置文字的大小*/
margin: 4px 2px; /*設置按鈕的外邊距*/
cursor: pointer; /*設置鼠標樣式為手型*/
}
/*查詢圖標的樣式*/
button.search-btn:before {
content: "\f002"; /*使用Font Awesome庫的查詢圖標*/
font-family: FontAwesome; /*將查詢圖標的字體設置為FontAwesome*/
margin-right: 10px; /*設置查詢圖標和文字之間的間距*/
}

在上述代碼中，我們使用了Font Awesome庫的查詢圖標，并將查詢圖標的字體設置為FontAwesome。這樣就可以在網頁中使用該圖標了。

另外，我們也可以使用其他的查詢圖標，如下圖所示的兩個查詢圖標：

/*第一個查詢圖標*/
button.search-btn1:before {
content: ""; /*在:before偽元素中使用背景圖*/
background-image: url("search-icon.png"); /*查詢圖標的路徑*/
background-repeat: no-repeat; /*設置不重復背景圖*/
background-size: contain; /*設置背景圖縮放方式為contain*/
width: 16px; /*設置背景圖的寬度*/
height: 16px; /*設置背景圖的高度*/
display: inline-block; /*將查詢圖標設置為inline-block元素，使其可以在一行內顯示*/
margin-right: 10px; /*設置查詢圖標和文字之間的間距*/
}
/*第二個查詢圖標*/
button.search-btn2:before {
content: ""; /*在:before偽元素中使用背景圖*/
background-image: url("search-icon.svg"); /*查詢圖標的路徑*/
background-repeat: no-repeat; /*設置不重復背景圖*/
background-size: cover; /*設置背景圖縮放方式為cover*/
width: 16px; /*設置背景圖的寬度*/
height: 16px; /*設置背景圖的高度*/
display: inline-block; /*將查詢圖標設置為inline-block元素，使其可以在一行內顯示*/
margin-right: 10px; /*設置查詢圖標和文字之間的間距*/
}

在使用這兩個查詢圖標的樣式代碼中，我們分別使用了背景圖來顯示查詢圖標，并可以通過調整background-size屬性的值來控制背景圖的縮放方式。