首页 文章

试图改变猫头鹰Carousel导航中使用的字体颜色的字体颜色

提问于
浏览 次
0

我正在使用猫头鹰旋转木马2并使用字体真棒图标更新了prev和next按钮 . 我得到了一切工作，但我似乎无法弄清楚如何更改滚动图标的颜色 .

CSS

.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span{
    background-color: $green;
}

.owl-carousel .owl-nav .owl-prev,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-dot {
        font-family: 'fontAwesome';
}

.owl-carousel .owl-nav .owl-prev:before{
    // fa-chevron-left
    content: "\f177";
    color: #D6D6D6;
    font-size: rem-calc(18);
}

.owl-carousel .owl-nav .owl-prev:before:hover{
    // fa-chevron-left
    color: $white !important;
    border: 1px solid red;
}

.owl-carousel .owl-nav .owl-next:after{
    //fa-chevron-right
    content: "\f178";
    color: #D6D6D6;
    font-size: rem-calc(18);
}

.owl-theme .owl-nav [class*=owl-]{
    background-color: $white;
    border: 1px solid #D6D6D6;
    padding: 5px 10px
}

.owl-theme .owl-nav [class*=owl-]:hover{
    background-color: #D6D6D6;
}

JS

$('.owl-carousel').owlCarousel({
   loop:true,
   margin:10,
   nav:true,
   items: 1,
   navText : ["",""],
   rewindNav : true
});
javascript css sass zurb-foundation owl-carousel

1 回答

  • 0

    我相信您需要在 :before 和 :after CSS条目中包含 font-family: "FontAwesome" 以及 content: Unicode

    .owl-carousel .owl-nav .owl-prev:before {
    font-family: "FontAwesome";
    // fa-chevron-left
    content: "\f177";
    color: #D6D6D6;
    font-size: rem-calc(18);
}
.owl-carousel .owl-nav .owl-next:after{
    font-family: "FontAwesome";        
    //fa-chevron-right
    content: "\f178";
    color: #D6D6D6;
    font-size: rem-calc(18);
}
    回复于

相关问题