CSS圖標和文字的上下排列是網頁設計中的一項基本技能，它可以通過一些簡單的代碼來實現。在這篇文章中，我們將介紹如何通過CSS來實現這個功能。

.icon {
display: inline-block;
vertical-align: middle;
margin-right: 5px;
}
.text {
display: inline-block;
vertical-align: middle;
}

CSS中使用inline-block屬性將圖標和文字框在同一行內排列，并使用vertical-align屬性來設置它們的垂直排列方式。我們將圖標和文字分別設為.icon和.text的class，并給.icon添加一個margin-right來添加一些空間。你也可以根據需要對此進行調整。

下面是我們實現的效果：

收藏

在這個示例中，我們在一個鏈接中放置了一個圖標和一個文字。我們使用了Font Awesome圖標庫中的一個星形圖標，它被放置在.icon的span元素中，并使用了text類來添加一個文字標簽。在這個鏈接中，我們將文字設置為“收藏”。

這就是如何通過CSS進行圖標和文字的上下排列。使用這種排列方式可以為網站添加更好的視覺效果，讓它們看起來更加有吸引力。