我们经常需要在设计Web页面或者做H5APP的时候经常需要使用图标和文字结合的方式增强页面元素的前端效果，比如登录页面中的用户名和密码经常就是图标和文字结合的方式展现的。

一、文字前面加小图标的三种方法

我这里讲三种方法，经过测试，我主要推荐最后一种方法，因为显示效果最好，同时也实现图标和文字完美对齐。

1、增加一个img标签指向图标路径

代码截图：

代码内容：

<!--css代码-->

.mui-input-row{

line-height: 40px;

height: 40px;

}

<!--元素-->

<div class="mui-input-row">

<img src="../images/datetime.png" style="width:20px;height:20px">

<span>日期</span>

</div>

2、增加一个span标签设置背景图片样式

代码截图：

代码内容：

<!--css代码-->

.mui-input-row{

line-height: 40px;

height: 40px;

}

.img{

background: url(../images/datetime.png) no-repeat center / 100%;

width:20px;

height:20px;

display:inline-block;

margin-left:7px;

}

<!--元素-->

<div class="mui-input-row">

<span class='img'></span>

<span>日期</span>

</div>

3、为文字标签设置背景图片(推荐)

代码截图：

代码内容：

<!--css代码-->

.mui-input-row{

line-height: 40px;

height: 40px;

}

.img{

background: url(../images/datetime.png) no-repeat left / 20px;

display: inline-block;

margin-left:15px;

width:60px;

text-align: right;

}

<!--元素-->

<div class="mui-input-row">

<span class='img'>日期</span>

</div>

三种方法的效果展示：

上图三个日期图标分别是按照以上三种方法实现的，通过效果对比可以明显看出最后一种方法对齐情况最好，所以推荐大家都用这种方法，而且代码量少，也不需要多余的标签，非常方便，所以大家快去尝试吧~