How to change jquery Flexslider arrows design?
12,892
Solution 1
If you don't want to touch font or add a new font containing icons matching your design, You can achieve something similar by overriding the 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;
}
Solution 2
You can use fontawesome insteed flexslider font, modifying css such this example:
.flex-direction-nav a:before {
font-family: 'FontAwesome';
font-size: 50px;
display: inline-block;
content: '\f053';
color: rgba(255, 255, 255, 0.9);
}
.flex-direction-nav a.flex-next:before {
content: '\f054';
}
@font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
first of all
![Khaled Md Tuhidul Hossain](https://lh5.googleusercontent.com/-v8_62uO5dNI/AAAAAAAAAAI/AAAAAAAADXw/xPW1nVgZbG8/photo.jpg?sz=256)
Author by
Khaled Md Tuhidul Hossain
Updated on June 08, 2022Comments
-
Khaled Md Tuhidul Hossain about 2 years
i am trying to change Flexslider arrows design from css file, but failed. i am giving screenshot of what i did and wat i wanted :D or is there any way to change flexslider icon or font? this is my work: http://i.stack.imgur.com/4fgcU.png this is i want to do : http://i.stack.imgur.com/zhxqI.png
<ul> <li><a href="#" title="Previous"><span class="icon icon-arrow-left8"></span></a> </li> <li><a href="#" title="Next"><span class="icon icon-arrow-right8"></span></a> </li> </ul>