[分享]css两边的图标怎么弄

在网页设计中，经常会遇到需要在文本或图片两侧添加一些小图标的情况。这些图标能为文本内容增添更多的信息，使页面看起来更加美观。那么，怎样用CSS实现这样的效果呢？ .iconleft { backgro...

在网页设计中，经常会遇到需要在文本或图片两侧添加一些小图标的情况。这些图标能为文本内容增添更多的信息，使页面看起来更加美观。那么，怎样用CSS实现这样的效果呢？

 .icon-left {
        background-image: url("left-icon.png");
        background-repeat: no-repeat;
        background-position: left center;
        padding-left: 20px;
    }
    .icon-right {
        background-image: url("right-icon.png");
        background-repeat: no-repeat;
        background-position: right center;
        padding-right: 20px;
    } 

首先，我们需要创建两个类名分别为'icon-left'和'icon-right'的样式规则。通过background-image属性，我们可以设置图标的背景图片为'left-icon.png'或'right-icon.png'。background-repeat和background-position属性可分别设置图标的重复方式和位置。此外，为了使文本内容和图标之间有一定的距离，我们可以使用padding-left和padding-right属性。

在HTML代码中，我们可以将这些类名应用到相应的元素上：

 <p class="icon-left">左侧图标文本</p>
    <p class="icon-right">右侧图标文本</p> 

这样，就可以轻松地在文本两侧添加图标了。