change dots size in slick.js

Question

I try to implement the slick.js slider with dots in my website. slider dots are very small in size.can i change the size of the dots? or it's default one

my css

.slider {
          width: 650px;
          margin: 0 auto;
        }

        img {
          width: 200px;
          height: 200px;
        } 

my html

<div class="row">
    <div class="col-sm-6">
        <div class="slider-about">
            <div class="slider">
                <div>
                    <img src="resources/image/slide1.jpg">
                </div>
                <div>
                    <img src="resources/image/slide2.jpg">
                </div>
                <div>
                    <img src="resources/image/slide3.jpg">
                </div>
                <div>
                    <img src="resources/image/slide1.jpg">
                </div>
                <div>
                    <img src="resources/image/slide2.jpg">
                </div>
                <div>
                    <img src="resources/image/slide3.jpg">
                </div>
            </div>
        </div>
    </div>
</div>

my js :

$('.slider').slick({
      slidesToShow: 3,
      slidesToScroll: 3,
      dots: true,
      infinite: true,
      cssEase: 'linear'
    });

this is dots appered

Krumm

Answer 1

The default theme stylesheet slick-theme.css uses "slick" font-family for the icons. Have uploaded the font files folder to your project? Or if you do not want to use the "slick" font-family, you can adjust the following CSS rule on line 178 in the slick-theme.css

    .slick-dots li button:before
    {
        font-family: 'slick';
        font-size: 6px;
        line-height: 20px;
        ...
    }

like this

    .slick-dots li button:before
    {
        font-size: 20px;
        line-height: 20px;
        ...
    }

Hillier