图标：文字的前缀图标 - 背景图片方式_CSS学习

来源：网络整理时间：2023/3/4 0:55:59 共 3630 浏览

文字前的图标，并且图标尺寸大于文字尺寸（高度）的情况下CSS：

<div class="time green">

     <i></i>限量抢，23点开放预热

    </div>

CSS：

.posts .time{height: 37px; line-height: 37px;text-align: center;font-size: 14px;border-bottom: 1px dashed #ededed;}

.posts .green{color: #39b98d;}

.posts .green i{display:inline-block;/*必须*/

 width: 18px; height: 18px;

 background: url(../images/greentime.png) no-repeat;

 position: relative;top: 3px;/*相对位置*/

 margin-right: 3px;

}

如果图标尺寸小于文字，甚至与文字高度一样的时候，就很容易，一旦图标尺寸明显大于文字，这时候就需要用到position: relative;相对定位去改变位置了。

版权说明：
本网站凡注明“广州松河原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：背景透明、文字不透明最简单的CSS方法 - background-color:rgba(229,52,51,0.75);_CSS学习 | ·下一条：大图(宽图)在任意宽度浏览器内显示原尺寸、并居中、无导航条CSS_CSS学习

图标： 文字的前缀图标 - 背景图片方式_CSS学习

图标：文字的前缀图标 - 背景图片方式_CSS学习