CSS 登錄圖標是在一個網站中實現“登錄”按鈕的重要元素。登錄圖標的美觀和功能性非常重要，因此選擇適當的CSS樣式對于網站開發人員來說是非常關鍵的。

.login-button {
display: inline-block;
padding: 10px 15px;
background-color: #336699;
color: #fff;
font-size: 14px;
font-weight: bold;
border-radius: 5px;
cursor: pointer;
}
.login-button:hover {
background-color: #174557;
}
.login-icon {
display: inline-block;
width: 25px;
height: 25px;
background-image: url('login-icon.png');
background-repeat: no-repeat;
background-size: contain;
margin-right: 10px;
}

在上面的代碼塊中，我們定義了兩個關鍵類：'login-button'和'login-icon'。'login-button'是“登錄”按鈕的主要樣式，而'login-icon'是用于顯示登錄圖標的容器。

在'login-button'類中，我們定義了按鈕的內邊距、背景顏色、字體顏色、字號、字體加粗程度以及圓角大小。我們還通過將“指針”樣式設置為“指針”來為按鈕添加鼠標懸停樣式。

在'login-icon'類中，我們定義了圖標容器的尺寸、背景圖像的URL以及如何處理背景圖像的樣式。容器的尺寸應該足以容納圖標并使其與按鈕文本相比不顯得過于突兀。我們使用'background-size : contain'來保持圖標的原始比例，同時確保圖標在容器內居中顯示。

在HTML中，我們可以將這兩個類組合在一起，如下所示：

<button class="login-button">
<span class="login-icon"></span>
登錄
</button>

將這些代碼放入你的CSS文件和HTML文件中，你就可以實現一個漂亮而實用的CSS登錄圖標了！