在使用CSS設(shè)計網(wǎng)頁時，經(jīng)常需要設(shè)計查詢按鈕，并且為其添加查詢圖標(biāo)。以下是一些常用的查詢按鈕和查詢圖標(biāo)的樣式代碼。

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

在上述代碼中，我們使用了Font Awesome庫的查詢圖標(biāo)，并將查詢圖標(biāo)的字體設(shè)置為FontAwesome。這樣就可以在網(wǎng)頁中使用該圖標(biāo)了。

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

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

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