Home Forums Themes Support Gecko Meta slider is missing arrow icons

Tagged: 

This topic contains 4 replies, has 2 voices, and was last updated by  memuaarid 5 months, 2 weeks ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #14396

    I’m having an issue with meta slider in Gecko theme. I’m using arrows for navigation in my slider. For some reason correct arrow icons aren’t showing in the slider:

    meta slider arrows

    #14398

    Hi,

    You can add custom css in JanStudio > Theme Option > General Layout > Custom CSS to fix this issue.

    .metaslider .flexslider .flex-direction-nav li a.flex-prev, 
    .metaslider .flexslider .flex-direction-nav li a.flex-next {
    	outline: none;
    	padding: 0;
    	overflow: hidden;
    	top: 50%;
    	margin-top: -23px;
    	width: 40px;
    	height: 40px;
    	z-index: 8;
    	background: #b59677;
    	background-image: none;
    	border: 1px solid #fff;
    	-webkit-transform: rotate(45deg);
    	-ms-transform: rotate(45deg);
    	-o-transform: rotate(45deg);
    	transform: rotate(45deg);
    	text-shadow: none;
    }
    .metaslider .flexslider:hover .flex-direction-nav li a.flex-next {
    	right: 30px;
    }
    .metaslider .flexslider:hover .flex-direction-nav li a.flex-prev {
    	left: 30px;
    }
    .metaslider .flexslider .flex-prev:hover,
    .metaslider .flexslider .flex-next:hover {
    	opacity: 1;
    }
    .flex-direction-nav .flex-prev:before, 
    .flex-direction-nav .flex-next:before {
    	font-family: 'Pe-icon-7-stroke';
    	font-size: 36px;
    	color: #fff;
    	-webkit-font-smoothing: antialiased;
    	-moz-osx-font-smoothing: grayscale;
    	text-indent: 0;
    	display: block;
    	line-height: 36px;
    	-webkit-transform: rotate(-45deg);
    	-ms-transform: rotate(-45deg);
    	-o-transform: rotate(-45deg);
    	transform: rotate(-45deg);
    }
    .metaslider .flexslider .flex-direction-nav li .flex-prev {
    	left: 30px;
    }
    [dir='rtl'] .metaslider .flexslider .flex-direction-nav li .flex-prev {
    	right: 30px;
    	left: auto;
    }
    .metaslider .flexslider .flex-direction-nav li .flex-prev:before {
    	content: '\e686' !important;
    }
    [dir='rtl'] .metaslider .flexslider .flex-direction-nav li .flex-prev:before {
    	content: '\e684' !important;
    }
    .metaslider .flexslider .flex-direction-nav li .flex-next {
    	right: 30px;
    }
    [dir='rtl'] .metaslider .flexslider .flex-direction-nav li .flex-next {
    	right: auto;
    	left: 30px;
    }
    .metaslider .flexslider .flex-direction-nav li .flex-next:before {
    	content: '\e684' !important;
    }
    [dir='rtl'] .metaslider .flexslider .flex-direction-nav li .flex-next:before {
    	content: '\e686' !important;
    }

    Best regards

    #14402

    Thank you for your answer!

    Now these wrong arrows/icons are gone. However, any arrow icons aren’t showing:

    Arrows

    I wish to have the result just like in the demo:

    demo

    #14407

    Hi,

    I help you fixed this.

    Best regards

    #14408

    Thank you so much. 🙂

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.