在網(wǎng)頁(yè)設(shè)計(jì)中，圖標(biāo)和文字的搭配是一個(gè)很重要的細(xì)節(jié)。使用 CSS 可以很方便地實(shí)現(xiàn)同時(shí)展示圖標(biāo)和文本的效果。

有時(shí)候我們會(huì)遇到這樣的需求：一個(gè)按鈕上需要有一個(gè)小圖標(biāo)并且有文字說(shuō)明。我們可以利用 CSS 的偽元素選擇器 ::before 和 ::after 給按鈕添加圖標(biāo)，并且為文字添加 margin 或 padding 使得它們?cè)谕恍猩稀?/p>

.btn {
position: relative;
padding-left: 20px; /* 為文字騰出位置 */
display: inline-block; /* 實(shí)現(xiàn)圖標(biāo)和文字在同一行 */
}
.btn::before {
content: url('img/icon.png'); /* 添加圖標(biāo) */
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%); /* 讓圖標(biāo)垂直居中 */
width: 16px;
height: 16px;
margin-right: 10px; /* 為圖標(biāo)騰出位置 */
display: inline-block; /* 讓圖標(biāo)和文字在同一行上 */
}

通過(guò)上面的 CSS，我們可以讓按鈕上的圖標(biāo)和文字在同一行上，并且呈現(xiàn)良好的效果。