CSS浮动图标是一种通过CSS样式来实现图标浮动效果的方法。它主要通过将图标设置为浮动元素，并控制元素的位置和大小来实现。下面我们就来看一下具体的代码实现方法。
首先，在HTML代码中，我们需要在需要放置浮动图标的元素内部添加一个子元素，用来放置图标元素。例如：
``````
其中，类名为“float-icon”的P标签用来表示需要放置浮动图标的元素。类名为“icon”的SPAN标签用来表示浮动图标的元素。
接着，在CSS样式中，我们需要针对这两个元素进行样式的设置，包括浮动、位置、大小等。例如：
```
.float-icon {
position: relative;
padding-left: 20px; /* 腾出图标的位置 */
}
.float-icon .icon {
display: block;
position: absolute;
top: 0;
left: 0;
width: 16px;
height: 16px;
background: url('../images/icon.png') no-repeat left top; /* 图标图片的路径和位置 */
}
```
其中，P元素需要设置position为relative，用于让子元素的position:absolute起作用。同时，为了腾出图标位置，我们还要设置padding-left属性，值为图标的宽度。而SPAN元素则需要设置position为absolute，然后通过top、left等属性控制图标的位置，通过width、height属性控制图标的大小，最后通过background属性设置图标的背景图片。
通过这样的设置，我们就可以实现一个简单的CSS浮动图标了。如果需要在图标上添加一些交互效果，比如移上去变色等，也可以在CSS样式中针对:hover伪类进行设置，实现更加丰富的效果。
完整的CSS浮动图标代码如下：
``````
通过这样的设置，我们就可以在需要的地方实现简单的浮动图标效果，并且可以根据需要进行个性化风格的定制。