FontAwesome 5.x Icon in CSS Is Not Displayed

I would like to display an icon in an HTML element, using CSS font-family and content, but it does not display, the broken icon appears.

I call the FontAwesome 5.1 library through the CDN:

This would be the icon: link

CSS looks like this:

<style>
#buttonTop {
    display: inline-block;
    background-color: #FF9800;
    width: 50px;
    height: 50px;
    text-align: center;
    border-radius: 4px;
    position: fixed;
    bottom: 30px;
    right: 30px;
    transition: background-color .3s, 
    opacity .5s, visibility .5s;
    opacity: 0;
    visibility: hidden;
    z-index: 1000;
}

/* AQUI GOSTARIA DE EXIBIR O ICONE DO FONTAWESOME */
#buttonTop::after {
    content: "\f062";
    font-family: "Fontawesome";
    font-weight: normal;
    font-style: normal;
    font-size: 2em;
    line-height: 50px;
    color: #fff;
}
#buttonTop:hover {
    cursor: pointer;
    background-color: #333;
}
#buttonTop:active {
    background-color: #555;
}
#buttonTop.show {
    opacity: 1;
    visibility: visible;
}
</style>

And the HTML:

<a id="buttonTop"></a>

The Jquery library through the CDN:

link

<script>
        var btn = $('#buttonTop');

        $(window).scroll(function() {
          if ($(window).scrollTop() > 300) {
            btn.addClass('show');
          } else {
            btn.removeClass('show');
          }
        });

        btn.on('click', function(e) {
          e.preventDefault();
          $('html, body').animate({scrollTop:0}, '500');
        });
</script>