Slick slideshow dots showing up as weird characters

Question

I'm using slick.js to create a slideshow. All is working well except the dots. They're showing up, but they're showing up as this weird character string (http://newsinteractive.post-gazette.com/40for10/img/slideshow/weird_chars.png).

My code seems right. What's wrong?

jquery:

$('#slideshow2').slick({
    arrows: true,
    prevArrow: "<i class='fa fa-2x fa-arrow-circle-o-left'></i>",
    nextArrow: "<i class='fa fa-2x fa-arrow-circle-o-right'></i>",
    accessibility: true,
            adaptiveHeight: true,
            dots: true
});

css:

.slick-dots
{
    position: absolute;
    bottom: 0px;
    display: block;
    width: 100%;
    padding: 0;
    list-style: none;
    text-align: center;
    background-color: white;

}

Answer 1

It is an encoding issue as Mindaugas suggested.

Matheus's solution is misleading, you do not have to download the css file although this works because in the actual .css file the encoding is stipulated.

For instance, I did not download the css and was successful pulling from a CDN simply by adding a charset="UTF-8" attribute to my <link> tag.

Full solution would look like:

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" charset="UTF-8" />

Answer 2

meta charset="utf-8" << thats it