如何更改jquery Flexslider箭头设计?
我试图从css文件更改Flexslider箭头设计,但失败了。 我给出了我所做的和我想要的东西的截图:D 或者有没有办法更改flexslider图标或字体? 这是我的工作: 这是我想做的:如何更改jquery Flexslider箭头设计?,jquery,flexslider,arrows,Jquery,Flexslider,Arrows,我试图从css文件更改Flexslider箭头设计,但失败了。 我给出了我所做的和我想要的东西的截图:D 或者有没有办法更改flexslider图标或字体? 这是我的工作: 这是我想做的: 如果您不想触摸字体或添加包含与您的设计相匹配的图标的新字体, 您可以通过覆盖css实现类似的功能: .flex-direction-nav a { display: block; width: 40px; height: 40px; margin: -20px 0
-
-
如果您不想触摸字体或添加包含与您的设计相匹配的图标的新字体,
您可以通过覆盖css实现类似的功能:
.flex-direction-nav a {
display: block;
width: 40px;
height: 40px;
margin: -20px 0 0;
position: absolute;
top: 50%;
z-index: 10;
overflow: hidden;
opacity: 0;
cursor: pointer;
color: rgba(0, 0, 0, 0.8);
text-shadow: none;
-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;
color: #fff;
background-color: #000;
border-radius: 50%;
text-align: center;
}
.flex-direction-nav a:before {
font-family: "flexslider-icon";
font-size: 20px;
display: inline-block;
content: '\f001';
color: #FFF;
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
line-height: 40px;
}
.flex-direction-nav .flex-next {
right: -50px;
text-align: center;
}
结果如下:
您可以使用fontawesome代替flexslider字体,修改css,例如以下示例:
。柔性方向导航a:之前{
字体系列:“FontAwesome”;
字体大小:50px;
显示:内联块;
内容:'\f053';
颜色:rgba(255,255,255,0.9);
}
.flex方向导航a.flex-next:前{
内容:'\f054';
}
为什么不使用令人敬畏的字体图标?我试过了,效果不错。但是这个圆看起来是长方形的,而不是圆形的。你能帮忙吗。
.flex-direction-nav a {
display: block;
width: 40px;
height: 40px;
margin: -20px 0 0;
position: absolute;
top: 50%;
z-index: 10;
overflow: hidden;
opacity: 0;
cursor: pointer;
color: rgba(0, 0, 0, 0.8);
text-shadow: none;
-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;
color: #fff;
background-color: #000;
border-radius: 50%;
text-align: center;
}
.flex-direction-nav a:before {
font-family: "flexslider-icon";
font-size: 20px;
display: inline-block;
content: '\f001';
color: #FFF;
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
line-height: 40px;
}
.flex-direction-nav .flex-next {
right: -50px;
text-align: center;
}