Bootstrap carousel controls located incorrectly

Question

Using Bootstrap 3 with fontawesome for the icons on the controls: everything looks ok except the icons are located at the top of the carousel instead of centered.

<div class="row" id="landing">
            <div class="col-md-12">
                <div class="carousel slide" id="welcome-carousel" data-ride="carousel">
                    <!-- Indicators -->
                    <ol class="carousel-indicators">
                        <li data-target="#welcome-carousel" data-slide-to="0"></li>
                        <li data-target="#welcome-carousel" data-slide-to="1"></li>
                        <li data-target="#welcome-carousel" data-slide-to="2"></li>
                    </ol>

                    <!-- Slides -->
                    <div class="carousel-inner">
                        <div class="item active">
                            <img src="assets/images/WelcomeImage0.png" alt="" >
                            <div class="carousel-caption">
                                <h3>Blooh Blah Bleeh</h3>
                                <p>Important bizness talk</p>
                            </div><!-- end caption -->
                        </div><!-- end item -->
                    </div><!-- end carousel-inner slides -->

                    <!-- Controls -->
                    <a href="#welcome-carousel" class="left carousel-control" data-slide="prev">
                        <span class="fa-stack fa-lg">
                            <i class="fa fa-square-o fa-stack-2x"></i>
                            <i class="fa fa-angle-left fa-stack-1x"></i>
                        </span>
                    </a><!-- end left control -->
                    <a href="#welcome-carousel" class="right carousel-control" data-slide="next">
                        <span class="fa-stack fa-lg">
                            <i class="fa fa-square-o fa-stack-2x"></i>
                            <i class="fa fa-angle-right fa-stack-1x"></i>
                        </span>
                    </a> <!-- end right control -->
                </div><!-- end carousel -->
            </div><!-- end col-md-12 -->
        </div><!-- end landing row -->

I generate the CSS with this .less file using recess:

@import "../bootstrap/less/bootstrap.less";

@brand-primary: #ee594e;
@grid-gutter-width: 0;

body { padding-top: 70px; }

//make the carousel full-width
.carousel-inner,.carousel,.item,.container,.fill {
  height:100%;
  width:100%;
}

I include this for completeness only, since commenting out everything but the first import does not change the location of the icons. In a similar vein, there are no load errors or anything in the console. I appreciate the help!

Answer 1

Use .icon-prev and .icon-next class, and the icons will be vertically centered.

<!-- Controls -->
<a href="#welcome-carousel" class="left carousel-control" data-slide="prev">
    <span class="icon-prev fa-stack fa-lg">
        <i class="fa fa-square-o fa-stack-2x"></i>
        <i class="fa fa-angle-left fa-stack-1x"></i>
    </span>
</a><!-- end left control -->
<a href="#welcome-carousel" class="right carousel-control" data-slide="next">
    <span class="icon-next fa-stack fa-lg">
        <i class="fa fa-square-o fa-stack-2x"></i>
        <i class="fa fa-angle-right fa-stack-1x"></i>
    </span>
</a>