[laimas]

Знаю на 77% HTML и css.

А что же тогда мечетесь, давно уже можно было разобраться со стрелкой.

.имя родительского_класса_в_шапке .up:after {
    dispaly: block; /*или block!important; или ... найти, понять изменить, отладчик бразуера в помощь*/
    color: #fff; /*белый цвет*/
}

Тоже самое и для .down:after который в шапке. Вы даже не добавили в CSS стиль цвета для стрелки в шапке, это разве не лень, если знать на 77% HTML и css?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style>
.ratehead {
    background-color: #0164C6;
    color: #fff;
}
.ratehead .up, .ratehead .down {
    color: #fff;
}
</style>

<div class="ratehead">
<span class="current"></span>
</div>

<script>
//именно такое и получит Ajax
var data = {"current":{"date":"11.2.2018","value":58.17,"rate":1},"previous":{"date":"10.2.2018","value":57.67,"rate":1}};

//и вот тут данные этого объекта помещаются на свои места 
    $.each(data, function(k, o) {
        $('.'+k).html("$ " + o.value + ' <b class=' + ['down','up'][o.rate] +'>' + ['▼','▲'][o.rate] +'</b>')
    })
</script>

Все на месте?