CSS是網(wǎng)站設(shè)計中很重要的一個部分，其中使用左邊圖標(biāo)右邊文字效果是比較常用的一種效果。下面我們來簡單介紹該效果的實(shí)現(xiàn)。

CSS代碼如下：
.icon-text{
display: inline-block;  /*以行內(nèi)塊的方式顯示*/
padding: 10px 15px;   /*圖標(biāo)和文字的間距*/
font-size: 16px;   /*文字大小*/
line-height: 1.5;  /*文字行高*/
border: none;   /*去除邊框*/
background: #fff;  /*背景顏色*/
color: #333;   /*文字顏色*/
text-align: left;   /*文字左對齊*/
}
.icon-text:before{
content: '';   /*自定義內(nèi)容為空*/
display: inline-block;  
width: 20px;  /*圖標(biāo)寬度*/
height: 20px;  /*圖標(biāo)高度*/
margin-right: 10px;  /*圖標(biāo)和文字的間距*/
background: url(圖標(biāo)地址) no-repeat center center;  /*圖標(biāo)地址和屬性*/
background-size: contain;  /*以較小的縮放比例顯示*/
}
HTML代碼如下：
文字
其中，將文字和圖標(biāo)用一個
標(biāo)簽包裹，class為icon-text。

通過上述代碼的實(shí)現(xiàn)，我們可以很方便的在頁面中使用左邊圖標(biāo)右邊文字的效果，提升頁面的視覺效果。同時，在實(shí)際應(yīng)用中，我們還可以通過修改CSS代碼中的文字大小、顏色等屬性，以達(dá)到更好的效果。