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 6 days, 18 hours ago.

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

    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
    memuaarid
    Supported

    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
    memuaarid
    Supported

    Thank you so much. 🙂

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

You must be logged in to reply to this topic.