css 左图标右文字

CSS是一种用于网页设计的语言，可以通过一些属性和样式来美化网页的内容。其中一种常见的效果就是在文字左边或右边加上一些小图标或者符号。

实现这个效果比较简单，只需要使用CSS中的background-image属性以及background-position属性即可。以下是一个简单的代码示例：

.icon {
    display: inline-block;
    background-image: url('icon.png');
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 20px;
}
    

上面的代码中，我们使用了一个类名为icon的CSS样式。该样式中，我们使用了display: inline-block; 让元素呈现为内联块级元素，并将背景图片通过background-image: url('icon.png'); 设置为我们所需的小图标。接下来通过background-repeat: no-repeat; 属性让该图标不进行平铺，而是固定在元素背景中心。最后，通过background-position: left center; 将图标设置在元素背景的左侧。此时，因为图标的存在，我们需要通过padding-left: 20px; 来增加元素左侧的内容间距。

通过以上简单的CSS设置，我们就可以在网页中实现文字左侧带有图标的效果。同理，我们也可以通过background-position: right center; 将图标设置在文字右侧。这种效果经常在列表、导航和按钮等地方出现，并且也可以根据实际需求添加不同的图标来满足不同的设计需求。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！