文字前面加图标

如上图所示,是要实现的目标

看似简单,但实际图标比文字大,如果什么都不做,那么会是底端对齐,如图所示

使用flex布局,上下可以对齐,但是多行的时候,会跟多行对齐,会是这样子的:

display: flex;
align-items:center;

最后是使用图标绝对定位+文字padding-left实现

#home-store-list .store-item .store-tel {
        position:relative;
        font-size: 12px;
    }
        #home-store-list .store-item .store-tel span {
            padding-left: 18px;
        }

    #home-store-list .store-item .store-address {
        position: relative;
        color: #969799;
        font-size: 12px;
    }

        #home-store-list .store-item .store-address span {
            padding-left: 18px;
        }

.icon {
    width: 13px;
    height: 14px;
    background-size: cover;
    background-repeat: no-repeat;
    display: inline-block;
    position:absolute;
    top:4px;
    left:0px;
}

.icon-addr {
    background-image: url(/Crm/home/WxWorkGroup/icon-addr.png);
}

.icon-tel {
    background-image: url(/Crm/home/WxWorkGroup/icon-tel.png);
}