CSS图片上放图标是许多网站设计中的常见元素之一，它可以为用户提供更好的视觉体验。下面我们来看一下如何使用CSS在图片上放置图标。

img {
position: relative;
}
img::before {
content: "";
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40px;
height: 40px;
background-image: url(icon.png);
background-size: 100%;
}

首先，我们需要在图片上添加一个相对定位（position: relative）。接下来，在图片的伪元素（::before）中设置图标的样式。通过设置content属性为空，我们可以创建一个空的伪元素。然后，将伪元素设置为块级元素（display: block），以便我们可以通过设置宽度和高度为图标指定大小。通过设置position属性为absolute、top和left属性为50%以及transform属性为translate(-50%, -50%)，可以将图标定位在图片的中心位置。最后，使用background-image属性将图标图像指定为我们所需的图标，并将background-size属性设置为100%以填充整个伪元素。

最终效果将是在图片的中心位置放置一个图标。您可以根据自己的需要选择不同的图标，并在CSS中进行相应的更改。