在網頁設計中，排行榜是經常被使用的一種元素。為了讓頁面看起來更加生動有趣，我們通常會在排行榜中使用圖標來表示不同的元素。在這里，我們介紹一些常用的CSS排行榜圖標設計。

/* 第一種圖標：序號圓圈 */
.number {
display: inline-block;
width: 24px;
height: 24px;
border-radius: 50%;
font-size: 14px;
line-height: 24px;
text-align: center;
background-color: #dcdcdc;
font-weight: bold;
margin-right: 10px;
}
/* 第二種圖標：箭頭 */
.arrow {
margin-right: 10px;
height: 20px;
width: 20px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.arrow-up {
background-image: url("up-arrow.svg");
}
.arrow-down {
background-image: url("down-arrow.svg");
}
/* 第三種圖標：徽章 */
.badge {
display: inline-block;
padding: 2px 5px;
font-size: 12px;
border-radius: 4px;
color: white;
text-transform: uppercase;
font-weight: bold;
margin-right: 10px;
}
.first-place {
background-color: #ff3b30;
}
.second-place {
background-color: #ff9500;
}
.third-place {
background-color: #ffcc00;
}

以上就是三種常用的CSS排行榜圖標設計，可以根據具體的需求選擇使用哪種。通過運用這些圖標，可以讓排行榜變得更加美觀和易于理解。