Problem with fontawesome icon - Fontawesome, Bootstrap

I have a problem with fontawesome , for those who do not know, fontawesome is a library that allows you to use icons focused on web usability. I also use bootstrap and I do not know why, but when I put the icon of an arrow with size 2x I have a white box, instead if I put it to normal size (small for what I need it), it looks perfectly.

Here my code:

<div class="col-md-3">
        <div class="col-md-12">
            <div class="list-group">
                <a href="#" class="list-group-item  list-group-item-danger active">First item</a>
                <a href="#" class="list-group-item list-group-item-danger">Second item</a>
                <a href="#" class="list-group-item list-group-item-danger">Third item</a>
            </div>
        </div>
        <br/><br/>
        <div class="col-md-12" style="text-align: center">
            <div class="col-md-6" style="color: #990000">
                <i class="fa-2x fa-arrow-up" aria-hidden="true"></i>
            </div>
            <div class="col-md-6" style="color: #990000">
                <i class="fa-2x fa-arrow-down" aria-hidden="true"></i>
            </div>
        </div>
        <br/><br/>
        <div class="col-md-12">
            <h1>Caja 2</h1>
        </div>
    </div>
    <div class="col-md-1"></div>
    <div class="col-md-8">
        <h1>Caja grande</h1>
    </div>
    <script>
        var elementos = $(".list-group-item");
        for(var i = 0; i < elementos.length; i++){
            $(elementos[i]).on("click",function(){
                if(this.className != "list-group-item list-group-item-danger"){

                }else{
                    for(var j = 0; j < elementos.length; j++){
                        if(elementos[j].className != "list-group-item list-group-item-danger"){
                            elementos[j].className = "list-group-item list-group-item-danger";
                        }
                    }
                    this.className = "list-group-item list-group-item-danger active";
                    /*
                            LLAMADA A AJAX PARA CARGAR DATOS DEL ITEM SELECCIONADO
                    */
                }
            });
        }
    </script>