如何设置prev/next箭头按钮的样式？

Question

目标

我一直在尝试修改slick.css以适应我的网站所需的风格.我slick.css从这里得到了.

现在

• 我想让箭头(左+右)更大
• 对于图标,我想使用没有circle-border它的那个.
• 我喜欢fa-chevron-right和fa-chevron-left

---

我试过了什么？

的一部分 slick.css

.slick-prev, .slick-next { position: absolute; display: block; height: 200px; width: 50px; line-height: 0; font-size: 0; cursor: pointer; background: transparent; color: transparent; top: 50%; margin-top: -10px; padding: 0; border: none; outline: none; }
.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { outline: none; background: transparent; color: transparent; }
.slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before { opacity: 1; }
.slick-prev.slick-disabled:before, .slick-next.slick-disabled:before { opacity: 0.25; }

.slick-prev:before, .slick-next:before { font-family: "slick"; font-size: 20px; line-height: 1; color: red; opacity: 0.75; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }



.slick-prev { left: -10px; top: 70px;  }
[dir="rtl"] .slick-prev { left: auto; right: -10px; top: 70px; }
.slick-prev:before { content: "?"; }
[dir="rtl"] .slick-prev:before { content: "?"; }

.slick-next { right: -10px; top: 70px; }
[dir="rtl"] .slick-next { left: -10px; top: 70px; right: auto; }
.slick-next:before { content: "?"; }
[dir="rtl"] .slick-next:before { content: "?"; }

HTML

<div class="row slick ">
// just a bunch of lists in here
</div>

---

细节照片

这就是我现在拥有的.

这就是我想要的.

---

题

• 有人可以帮我解决这个问题吗？

  我非常感谢您的考虑和时间.:)

Answer 1

基本的是它按内容属性生成箭头:

.slick-prev:before, .slick-next:before { font-family: "slick"; font-size: 40px; line-height: 1; color: red; opacity: 0.75; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }   

.slick-prev:before { content: "‹"; }
[dir="rtl"] .slick-prev:before { content: "›"; }

[dir="rtl"] .slick-next { left: -10px; top: 70px; right: auto; }
.slick-next:before { content: "›"; }
[dir="rtl"] .slick-next:before { content: "‹"; }

替换这些类,然后只使用边距和位置属性来调整箭头,如果这没有解决问题,请发送给我http://jsfiddle.net/链接我将发送给你完整的解决方案.

如果想使用Font Awesome

.slick-prev:before, .slick-next:before { font-family: FontAwesome; font-size: 40px; line-height: 1; color: red; opacity: 0.75; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }   

.slick-prev:before { content: "\f053"; }
[dir="rtl"] .slick-prev:before { content: "\f054"; }

[dir="rtl"] .slick-next { left: -10px; top: 70px; right: auto; }
.slick-next:before { content: "\f054"; }
[dir="rtl"] .slick-next:before { content: "\f053"; }

有关字体图标的列表,请访问http://astronautweb.co/snippet/font-awesome/ 以及如何实现字体访问此线程 使用字体awesome图标作为css内容

Answer 2

.slick-prev::before {
    font-family: FontAwesome;
    content: "\f0d9";
    font-size: 22px;
}  
.slick-next::before {
    font-family: FontAwesome;
    content:  "\f0da";
    font-size: 22px;        
}      

<link href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css" rel="stylesheet"/>

<button type="button" class="slick-prev "></button>

<button type="button" class="slick-next "></button>