CSS圖標(biāo)可以讓網(wǎng)頁更加美觀有趣。在圖片上浮動(dòng)的圖標(biāo)可以給用戶帶來更方便的交互體驗(yàn)。

img+span {
position: relative;
}
img+span:before {
content: "\f0e0";
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
font-size: 16px;
position: absolute;
top: 0;
right: 0;
width: 25px;
height: 25px;
line-height: 25px;
text-align: center;
color: #fff;
background-color: #333;
border-radius: 50%;
box-shadow: 0 3px 5px rgba(0,0,0,.3);
}

上面的代碼可以讓FontAwesome字體的圖標(biāo)浮動(dòng)在圖片的右上角。在這里，我們使用了偽類:before來實(shí)現(xiàn)浮動(dòng)效果。在偽類:before中，我們設(shè)置了圖標(biāo)的樣式，包括字號(hào)、顏色和背景色等屬性。

通過這種方法，我們可以給網(wǎng)頁添加更多有趣的效果。用戶在瀏覽網(wǎng)頁時(shí)，可以更加方便地進(jìn)行操作和交互。