Slick: CSS not working

[elliotjberman]

I've downloaded slick and am attempting to use it on my page, but I'm getting buttons that don't look right (displaying as collections of characters instead). Also, none of the images are scaling down to the container for the carousel. In Chrome developer tools, both slick.css and slick-theme.css are being successfully accessed, but even after manually adding the 'slick' font to the buttons, nothing is changing (and the scaling is still off). I've also opened in Safari with the same results, as well as trying it hosted locally and on a server.

[leggomuhgreggo]

fiddle?

[elliotjberman]

http://jsfiddle.net/elliotjberman/bohtr7u6/

So far on the fiddle the carousel isn't appearing at all.

[leggomuhgreggo]

Looks like you're calling the slick js before the jquery there, instead of after. I switched and it worked.

[elliotjberman]

Thanks.

It's fixed in the fiddle but when I'm running it on my machine I'm still not getting the correct fonts for the dots and arrows.

[elliotjberman]

To clarify, the functionality is working (slides are moving when clicking the arrows and dots), but the fonts are not loading correctly, even though Chrome developer says that the elements are using the "slick" font.

[leggomuhgreggo]

Sadly, Chrome shows the font family in the inspector even if the font is not loading. I think Firebug will grey out the font in the font family value string in their inspector.

In the demo they font is called in the slick-theme.css, which adds some stylistic sugar to things. Your fiddle doesn't appear to call it. Make sure you're calling that somehow, or replacing it with your own arrow stuff

[elliotjberman]

Ok. But on the JSFiddle the characters are appearing, like so:

But on my own full page, it's appearing like so:

I know issue #1256 had a similar problem although I didn't see a solution there. Even though I'm calling the theme and the regular css in my local file (as opposed to the fiddle, which only calls the base css), I'm still not getting the font to display correctly.

[leggomuhgreggo]

I mean the issue is that the fonts aren't loading. I updated your fiddle and it works.

http://jsfiddle.net/bohtr7u6/5/

[leggomuhgreggo]

Actually I suppose it's possible that the fonts are loading properly but another font family is overwriting the icon font. That could cause that too.

[elliotjberman]

I think I see what you mean (I definitely see the fixed font on the fiddle, thanks).

Even if I force different fonts on my slick carousel though (Times, Helvetica, or Slick font), I still get those odd looking characters. Is there something else that might be causing that problem? I think the browser isn't recognizing the glyphs or something? I know in other fonts the glyphs would probably look like they do but like I said, even in other fonts the characters do not change at all.

[simeydotme]

Wait, have you copy&pasted the slick files from anywhere? how did you install them? - if your unicoding gets messed up in transit, or somewhere in your sass/css you change from @charset: UTF-8 to something else, you could experience this issue?

[elliotjberman]

I'm linking from https://cdn.jsdelivr.net/jquery.slick/1.5.1/slick-theme.css and https://cdn.jsdelivr.net/jquery.slick/1.5.0/slick.css

[simeydotme]

Have you tried downloading the files from the Github source and putting them in your project directory? :)

[elliotjberman]

yes and they also didn't work there

[elliotjberman]

Well they did work mostly but this character issue was still occurring

[simeydotme]

:cry: - its frustrating because the code is fine; as proven on jsFiddle... its the environment that has a problem and I don't know/access your environment :(

[jayrav13]

As mentioned previously, I'm facing the same problem over at https://github.com/kenwheeler/slick/issues/1256. I posted my JSFiddle, which works fine, however my webpage still shows those weird characters. I have my raw code posted as well, if anyone gets a chance to check it out, maybe it'll help us figure this out?

[simeydotme]

What's your <!doctype> set to? :)

[leggomuhgreggo]

You might be well on your way, but, personally, I swap the files to fontawesome, because I'm using it for so many other things.

If it were me trying to debug with the slickfont I'd try to prioritize it on my stylesheet, working backwards to see where the break happens.

Font links/imports can sometimes be tricky--I've heard of servers goofin on them--can you load _any_ external fonts? Good luck!

[levymetal]

Are you defining a charset in your head tag? It should look something like this:

<head>
  <meta charset="UTF-8">
  ...
</head>

I've noticed problems when the charset is omitted, which isn't an really an issue considering you should always be defining a charset anyway.

[elliotjberman]

I'm using meta charset="UTF-8" and loading other external fonts successfully but I'll keep looking

[elliotjberman]

Got it working today
Not exactly sure what happened (works with "UTF-8" and without and also loads correct glyphs even if the slick css is omitted...???).
However, when viewing on incognito mode on Chrome or Safari, the glyphs don't work?

[amitdesai03]

I am also stuck with exact same issue as elliotjberman...banging my head on finding solution...any help is appreciated..

[klingerd]

I had the same problem. The reason adding the didn't work at first for elliotjberman, but then mysteriously started working was because you may have to clear your cached images/files on your browser before it reflects the change.

Adding UTF-8 didn't work for me until I cleared my cache.