Align vertically text with left icon CSS3

Question

What I need? Align vertically my text with my icon from elegant themes icon. T

My problem? The icon have a specific size so the text not align (vertically) correctly with the icon (the text display at the bottom).

This is what I tried:

HTML

<!-- Content ================================================== -->
<div class="container margin_60_35">
    <div class="row">    
        <div class="col-md-12">
            <h3 class="nomargin_top page-title">{{ $agenda['fecha'] }}</h3>
            @foreach($agenda['canchas'] as $cancha)
            <div class="panel-group">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a class="title-group" data-toggle="collapse" href="#collapse1">Cancha {{ $cancha['idCancha'] }}</a>
                        </h4>
                    </div>
                    <div id="collapse1" class="panel-collapse collapse">
                        <ul class="list-group">
                            @foreach($cancha['turnos'] as $turno)
                              <a class="list-group-item" href="#"><i class="icon_plus_alt"></i>&nbsp;<span class="nav-text"> {{ $turno['hora'] }} ({{ $turno['estado'] }})</span></a>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
            @endforeach
        </div><!-- End col-md-9 -->
    </div><!-- End row -->
</div><!-- End container -->
<!-- End Content =============================================== -->

*CSS**

.list-group .list-group-item{
    color: #a94442;
    vertical-align: middle;
}
.nav-text:after{
    position: absolute;
    vertical-align:middle;
}
.icon_plus_alt:before {
    font-size: 32px;
    color: green;
}

I know may be this kind of question asked multiple times, but I followed thousand of tutorial and nothing works.

Thanks!

Answer 1

I found the answer: I have to put

vertical-align: middle; 

into my icon property like this:

.icon_plus_alt:before {
    font-size: 32px;
    color: green;
    vertical-align: middle; 
}

Cheers!