Slick: Dots and Arrows not showing

Created on 21 Apr 2015 · 17Comments · Source: kenwheeler/slick

Hi All,

I'm running the basic HTML (with Slick included) in a PHP file and see that the "stock versions" of the dots and arrows are not coming in - rather it looks more like "invalid characters". They still work, but just wondering what the issue could be? Thanks for your help in advance!

Previously posted: https://github.com/kenwheeler/slick/issues/1115
Image attached.
screen shot 2015-04-20 at 11 15 38 pm

Source

jayrav13

👍7

Most helpful comment

Don't forget to define the charset in the <head>:

<meta charset="UTF-8">

This should fix your issue.

levymetal on 24 Apr 2015

👍33 ❤6 👎4 🎉2

All 17 comments

Didn't see this issue before so I posted a reply to #1115. As I said there:
I had a similar issue when I was testing my page from the file system without having it on a server. After I put it on a server and loaded it from there it looked like it should.

Eschon on 21 Apr 2015

Hmm - I already have that page on a server and previously tried it on a file system - none worked :(.

jayrav13 on 22 Apr 2015

Can you recreate this in a JS Fiddle, please :) - along with an indication of which browser and OS you're using.

Regards, Si.

simeydotme on 22 Apr 2015

Lol - can't win with this one. Put together a JSFiddle, and...it works fine.

https://jsfiddle.net/xtvdjphe/6/

Here's my raw code that's leading to the screenshot I showed above - thoughts?

<html>
<head>
    <title>My Now Amazing Webpage</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.slick/1.5.0/slick.css"/>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.slick/1.5.0/slick-theme.css"/>
</head>
<body style = "background-color:gray">

    <div class="your-class" style = "width:100px;height:100px;background-color:black;margin:auto;color:white">
        <div>your content</div>
        <div>your content</div>
        <div>your content</div>
    </div>

    <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.slick/1.5.0/slick.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function(){
            $('.your-class').slick({
                dots:true,
                arrows:true
                // setting-name: setting-value
            });
        });
    </script>   

</body>
</html>

jayrav13 on 24 Apr 2015

Don't forget to define the charset in the <head>:

<meta charset="UTF-8">

This should fix your issue.

levymetal on 24 Apr 2015

👍33 ❤6 👎4 🎉2

@levymetal that was it!! Thank you for your help!

jayrav13 on 24 Apr 2015

No worries :)

levymetal on 24 Apr 2015

Ah the good old UTF-8 gotcha.
Usually the meta tag should work fine but it would be best practice to let your server handle this by setting the right encoding in the http-header.

Eschon on 24 Apr 2015

I was facing the same problem. Adding charset worked. Thank you.

vishborade on 20 Jun 2016

Yes , It's "UTF-8" .. Thanks

majidzeno on 4 Jan 2017

I've also added <meta charset='utf-8'> but still having same issue.
Can anyone help?

shojajou on 22 May 2017

👍7

@mojsho I'm having this problem right now. I opened the page in Firefox as someone above suggested, and I saw some errors that were not displayed in Chrome:

downloadable font: rejected by sanitizer (font-family: "slick" style:normal weight:normal stretch:normal src index:1) source: https://mywebsite.com/styles/fonts/slick.woff

downloadable font: rejected by sanitizer (font-family: "slick" style:normal weight:normal stretch:normal src index:2) source: https://mywebsite.com/styles/fonts/slick.ttf

Then I noticed that in the network request for slick.ttf and slick.woff, the response headers had Content-Type: "text/html" when they really should be "application/font-woff" and "application/x-font-ttf". Seems like the server just needs to be configured to return the right MIME types for these font files. I'll be trying this tomorrow.

Hope this helps you somewhat!

teekirol on 8 Jun 2017

i have the same issue here and i did't find the way to show the arrows

amine-louni on 23 Sep 2018

@amine-louni Be sure to load the CSS files of slick (slick.css , slick-theme.css) in your project

majidzeno on 23 Sep 2018

👍1

Hi everybody , I have the same problem . And it is related with the UTF-8, with the <meta charset='utf-8'> is not enought but if you can put the sentence in php header('Content-Type: text/html; charset=utf-8') the problem is solved , but , changing the charset is not a minor impact in a website, You need to analyze how this impact all the infomation that you have in databases or if you only have code html you need to convert it. to UTF-8 . I'll try to find another solution to the arrows. I'll be back if i find . regards

sergioN69 on 24 Oct 2018

Hi everybody , I have the same problem . And it is related with the UTF-8, with the <meta charset='utf-8'> is not enought but if you can put the sentence in php header('Content-Type: text/html; charset=utf-8') the problem is solved , but , changing the charset is not a minor impact in a website, You need to analyze how this impact all the infomation that you have in databases or if you only have code html you need to convert it. to UTF-8 . I'll try to find another solution to the arrows. I'll be back if i find . regards

I just solved it .

As I mentionned previously I cant put UTF-8 in all my site so I found that in the file slick-theme.css row 92 was defined

.slick-prev:before { content: 'â†'; } [dir='rtl'] .slick-prev:before { content: 'â†’'; }

which is the same that i saw in my web

so in another file of the library I found
$slick-prev-character: "\2190" !default;

so I just tryed to bring the numer of the character to the css definition

.slick-prev:before { content: '\2190'; } [dir='rtl'] .slick-prev:before { content: '\2190'; }

Which in some way solve the UTF-8 problem which was to convert

content: 'â†';

content: '\2190';

Hope helps others .
Regards
Sergio

sergioN69 on 24 Oct 2018

👍2

Similar issue with 'slick-dots'. Tried all suggestions. UTF-8 is in place, css and js are loading fine, everything but the dots are working as expected.
Changed the font-family to something more common like Arial, Helvetica still didn't do the trick.

When running locally the "•"s are in place, when running on the server they are missing.

When inspected on the local browser there is ".slick-dots li button::before" which goes missing on the server implementation.

Any ideas?