Font-Awesome icon responsive - How to replace icons when clicked?

You can do with jquery using the click function:

Inside the jQuery pageload

$("#teste").click(function(){
    if($(this).find("i").hasClass("fa-sort")){
        $(this).find("i").removeClass("fa-sort").addClass("fa-sort-down");
    }else if($(this).find("i").hasClass("fa-sort-down")){
        $(this).find("i").removeClass("fa-sort-down").addClass("fa-sort-up");
    }else{
        $(this).find("i").removeClass("fa-sort-up").addClass("fa-sort-down");
    }
});

Out of the jQuery pageload

$(document).on("click", "#teste", function(){
    if($(this).find("i").hasClass("fa-sort")){
        $(this).find("i").removeClass("fa-sort").addClass("fa-sort-down");
    }else if($(this).find("i").hasClass("fa-sort-down")){
        $(this).find("i").removeClass("fa-sort-down").addClass("fa-sort-up");
    }else{
        $(this).find("i").removeClass("fa-sort-up").addClass("fa-sort-down");
    }
});

In this last way, I suggest you change the context document (DOM) to the container where you will receive the click.

Follow test running:

$(document).on("click", "#teste", function(){
    if($(this).find("i").hasClass("fa-sort")){
        $(this).find("i").removeClass("fa-sort").addClass("fa-sort-down");
    }else if($(this).find("i").hasClass("fa-sort-down")){
        $(this).find("i").removeClass("fa-sort-down").addClass("fa-sort-up");
    }else{
        $(this).find("i").removeClass("fa-sort-up").addClass("fa-sort-down");
    }
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><tableclass="table">
<thead>
<tr>
	<th id="teste" rowspan="2" style="text-align: center; vertical-align: middle">Cliente   <i class="fa fa-fw fa-sort"></i></th>
  </tr>
  </thead>
</table>

Just to complement Thales Chemenian's response. I added a check to, when another header is clicked, the previous header icon back to the initial icon ( "fa fa-fw fa-sort" ).

var current_icon = ""; // guarda icone para teste
    $(document).on("click",".sort-arrows",
                function() {

                    // get Click
                    var clicked_icon = $(this).attr("id");
                    var clicked_aux = document.getElementById(clicked_icon);

                    // verifica se header mudou
                    if (clicked_aux != current_icon) {

                        // Verifica classe que ficou para "zerar"
                        if ($(current_icon).find("i").hasClass("fa fa-fw fa-sort-up")) {

                            $(current_icon).find("i").removeClass("fa fa-fw fa-sort-up").addClass("fa fa-fw fa-sort");

                        } else if ($(current_icon).find("i").hasClass("fa fa-fw fa-sort-down")) {

                            $(current_icon).find("i").removeClass("fa fa-fw fa-sort-down").addClass("fa fa-fw fa-sort");                
                        }   

                        // Muda o novo header para 'up'
                        $(this).find("i").removeClass("fa fa-fw fa-sort").addClass("fa fa-fw fa-sort-up");

                        // atualiza header atual
                        current_icon = clicked_aux;

                    }

                    // Continua no mesmo Header - Muda para /\ e \/
                    else {

                        alert("Continua no mesmo... " + "Clicked:"+ clicked_icon + " | Current: " + current_icon);

                        if ($(this).find("i").hasClass("fa fa-fw fa-sort")) {
                            $(this).find("i").removeClass("fa fa-fw fa-sort").addClass("fa fa-fw fa-sort-up");

                        } else if ($(this).find("i").hasClass("fa fa-fw fa-sort-up")) {
                            $(this).find("i").removeClass("fa fa-fw fa-sort-up").addClass("fa fa-fw fa-sort-down");

                        } else {
                            $(this).find("i").removeClass("fa fa-fw fa-sort-down").addClass("fa fa-fw fa-sort-up");
                        }
                    }
                });