Resize dots in slick.js

Question

I am trying to implement a slick.js dot slider on my website. slider dots are very small in size. Can I resize dots? or 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' }); 

these are the points marked

Answer 1

In the default theme stylesheet slick-theme.css for icons, use "slick" font-family. Uploaded the font file folder to your project? Or if you don't want to use a "smooth" font family, you can configure the following CSS rule on line 178 in 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; ... }