FlexSlider 箭头工作但不可见

Question

我尝试听从其他聊天室关于此问题的建议，但没有成功。我正在使用 Unbounce 并将所有代码从一个旧的着陆页复制到一个新的着陆页。一切正常，除了箭头不可见（但它们是可点击的，它们有效）。

到目前为止，我所做的只是移除箭头周围的框。

知道哪里出了问题吗？

Link to the old LP with working Flexslider

<style>
a {
  text-decoration: none !important;
}
 
/*Testimonials slider*/
.testimonial-container {
  background-color: transparent;
  width: 100%;
}

.cd-testimonials-wrapper {
 position: relative;
 width: 100%;
 max-width: 100%;
 margin: 0 auto;
 background-color: transparent;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 padding: 25px 0px 40px 0;
 z-index: 1;
}

.testimonial-content {
 max-width: 1000px;
 width: 80%;
 margin: 0 auto 30px auto;
}

.cd-testimonials {
 color: rgba(130, 132, 139, 1);
 text-align: center;
 list-style: none;
 padding: 0;
 margin: 0;
}

.cd-testimonials > li {
 position: absolute;
 opacity: 0;
   font-family: 'Fira Sans', sans-serif;
}

.cd-testimonials > li:first-child {
 position: relative;
 opacity: 1;
}

.testimonial-content p {
 font-style: italic;
 line-height: 1.4;
 margin-bottom: 30px;
 padding: 0 14px;
   font-size: 19px;
   color: #284A6A;
}

.cd-author .cd-author-info {
 display: inline-block;
 vertical-align: top;
   color: #0058A9;
   font-size: 16px;
   font-weight: 500;
  text-align: center;
 line-height: 1
}

ul.cd-author-info {
 list-style: none;
  
}

ul.cd-author-info li span {
 font-size: 14px;
 line-height: 32px;
 font-style: italic;
 font-weight: 300;
   color: #9c9c9c;
}

.flex-direction-nav a {
 text-decoration: none;
 display: block;
 width: 50px;
 height: 100%;
 margin: 0px 0 0;
 position: absolute;
 z-index: 9999;
 top: 0;
 opacity: 1;
 background: transparent;
 cursor: default;
 color: transparent;
 -webkit-transition: all 0.3s ease-in-out;
 -moz-transition: all 0.3s ease-in-out;
 -ms-transition: all 0.3s ease-in-out;
 -o-transition: all 0.3s ease-in-out;
 transition: all 0.3s ease-in-out;
}

.flex-direction-nav a:before {
 font-size: 52px;
 font-family: Arial;
    content: "\f053";
 position: absolute;
 display: block;
 top: 50%;
   cursor: pointer;
   color: transparent;
 padding: 14px 10px 14px 10px;
  
}

.flex-direction-nav a.flex-next:before {
 content: "\f054";
 padding: 14px 20px 14px 10px;
}

.flex-direction-nav .flex-prev {
 left: 0px;
}

.flex-direction-nav .flex-next {
 right: 0px;
 text-align: right;
}

.flexslider:hover .flex-direction-nav .flex-prev {
 opacity: 1;
 left: 0px;
}

.flexslider:hover .flex-direction-nav .flex-prev:hover {
 opacity: 1;
}

.flexslider:hover .flex-direction-nav .flex-next {
 opacity: 1;
 right: 0px;
}

.flexslider:hover .flex-direction-nav .flex-next:hover {
 opacity: 1;
}

.flex-direction-nav .flex-disabled {
 opacity: 0!important;
 filter: alpha(opacity=0);
 cursor: default;
}

.flex-control-paging li a {
 width: 6px;
 height: 6px;
 display: block;
 background: #666;
 background: rgba(0, 0, 0, 0.4);
 cursor: pointer;
 text-indent: -9999px;
 -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
 -moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
 -o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
 box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
 -webkit-border-radius: 20px;
 -moz-border-radius: 20px;
 border-radius: 20px;
}

.flex-control-paging li a:hover {
 background: #333;
 background: rgba(0, 0, 0, 0.7);
}

.flex-control-paging li a.flex-active {
 background: #000;
 background: rgba(2, 23, 31, 1);
 cursor: default;
}

.flex-control-nav {
 bottom: 30px;
 position: absolute;
 margin: 0 auto;
 padding: 0;
 text-align: center;
 width: 100%;
}

.flex-control-nav li {
 display: inline-block;
 padding: 0px 5px 0px 5px;
}
    
/*Footer icons custom style*/
.footer-icons {
    text-align: left;
  }
.footer-icons a {
    margin-right: 10px;
    color: #fff;
}

@media screen and (max-width: 767px) {
   .cd-author .cd-author-info {
  line-height: 1.4;
 }
 .cd-author .cd-author-info {
  font-size: 16px;
 }
   .testimonial-content p {
  font-size: 16px;
 }
 .flex-direction-nav a {
  width: 30px;
 }
 .flex-direction-nav a:before {
  font-size: 30px;
 }
 .flex-direction-nav a:before {
  padding: 14px 0px 10px 0px;
 }
 .flex-direction-nav .flex-prev {
  left: 0px;
 }
 .flex-direction-nav .flex-next {
  right: 0px;
  text-align: right;
 }
 .flexslider:hover .flex-direction-nav .flex-prev {
  opacity: 1;
  left: 0px;
 }
 .flexslider:hover .flex-direction-nav .flex-prev:hover {
  opacity: 1;
 }
 .flexslider:hover .flex-direction-nav .flex-next {
  opacity: 1;
  right: 0px;
 }
} 
</style>

Answer 1

您丢失了 Font Awesome css，这是导航箭头所必需的。

添加

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

到 <head> 部分。（就像工作页面一样，检查它的源代码行 2825）。祝你好运。

FlexSlider 箭头工作但不可见

FlexSlider Arrows working but not visible

flexslider

invisible

arrows

testimonials