カラーミーショップでslick.jsを実装したらドットと矢印が文字化けする問題を【解決】

相談者にゃんぴ

「え?カラーミーショップにslick.jsを実装したけど、ドットと矢印が文字化けしとるんよ。

何これ。」

どこにいてもデザインサポート Anywhere,Design.|デザイナーAyakaの似顔絵イラスト
Ayaka

「カラーミーショップをイチから勉強して実装ツライ&楽しかったー。それでは解決策を提示するよ!

さっそくいってみよう!」

この記事で解決できること

  • 「カラーミーショップにslick.jsを導入したけど文字化けする!」を解決

前提として、slick.js自体はすでに動いていることとします。

今回の案件はわけあって、slick.jsなどの外部ライブラリデータを自分のサーバーに置いて…などの設定を色々と変更できない環境でした。

なので、cssを上書きすることで対処しました。

先に結論:font-familyをFont Awesomeで上書きする!

とりあえず、フォントファミリーを指定して、上書きしたらいいんじゃ?と思ったので、それを実行したら見事文字化け解消!

こんな悩みを抱えている人は下記ソースをカラーミーショップのcss部分に記載してみてください。

サイト自体にFont Awesomeを導入していない場合は、各自導入してください><

ドット(dots)を上書きならコレ!

.slick-dots li button::before{
    content: "\f111" !important;
    font-family: "Font Awesome 5 Free" !important;
    font-weight:900 !important;
}

矢印(arrow)を上書きならコレ!

.slick-prev::before {
    content: "\f137" !important;
    font-family: "Font Awesome 5 Free" !important;
    font-weight:900 !important;
}
.slick-next::before {
    content: "\f138" !important;
    font-family: "Font Awesome 5 Free" !important;
    font-weight:900 !important;
}

矢印は、左右それぞれ違うフォントを指定しないといけないので、別々で記入しています。

もし、別の矢印に変えたいときはこのリストから選んで、CSSを変更してみてください!

content: "\f137" !important; /*←ここのf〜の部分を書き換える*/
相談者にゃんぴ

「なんだ、こんな簡単に解決できるんだ!さっそくやってみるにゃ〜」

以上、お役に立てましたら幸いです!

1600 1200 Ayaka@Designer