Insert an arrow into the slider button instead of text

Hello there Kharis,

Is there an opportunity to replace the text in the button of the header slider by a graphic icon, e.g. an arrow pointing downwards?

(I have alreads seen topics
http://docs.athemes.com/article/57-different-buttons-for-each-slide and
http://docs.athemes.com/article/49-add-a-second-slider-button, but I’m afraid this does not help)

Thank you very much in advance for a quick answer.
Best regards
Winfried

Hello Winfried,

Please try doing the below steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box

jQuery(function($) {

    if( $('.button-slider').length ) {

      var buttonContent = '<span class="btn-image"><i class="fa fa-down-arrow"></i></span>';    

      $('.button-slider').html(buttonContent);

    }

});

  1. Update
  2. Add the below custom CSS code to Appearance > Customize > Additional CSS:

.btn-image .fa {
  font-size: 20px;
}

Regards,
Kharis

Hi there Kharis,

Thank you! This works!
Great!

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis

Hee,

Well I tried those codes but it doesn’t work!
Can you help me?

Kind Regards, Ramon

Hello there,

Has site cache been applied in your site? If so, you should flush it after some code addition as it loads older state of your site. Please share a link of your site here, so I can inspect and troubleshoot it.

Regards,
Kharis

Hello,

Well I don’t know how can I see that?

www.media040.nl

Hello there,

Please try replacing this line:

var buttonContent = '<span class="btn-image"><i class="fa fa-down-arrow"></i></span>';    

to:

var buttonContent = '<span class="btn-image"><i class="fa fa-arrow-down"></i></span>';

Regards,
Kharis

Hi,

Well that worked thx! But how can I move it to the bottom of the headerslide?

Kind Regards,
Ramon van Bree

Hello there,

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    .slide-inner {
      top: auto;
      bottom: 0;
      -webkit-transform: translateY(0);
      -moz-transform: translateY(0);
      -ms-transform: translateY(0);
      -o-transform: translateY(0);
      transform: translateY(0);  
    }

Regards,
Kharis

Hee,

Well it did work, it moved to the bottom but the text moved with the arrow… The text needs to stay in the middle. Is that possible? The first slide is perfect but the other slides aren’t!

www.media040.nl

Kind Regards,
Ramon

Hello Ramon,

Please try this code:

    .slide-inner {
      height: 50%;
      -webkit-transform: translateY(-50%);
      -moz-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      -o-transform: translateY(-50%);
      transform: translateY(-50%);  
    }

    .slide-inner .text-slider {
      display: block;
      width: 100%;
      margin-bottom: 15%;
    }
     

    @media only screen and (max-width: 1024px) {

      .slide-inner { 
       top: 40%; 
      } 
      
      .text-slider .maintitle {
        font-size: 20px !important;
      }

      .text-slider .subtitle {
        font-size: 16px !important;
      }
      
    } 

Regards,
Kharis

Great it worked!
Thank you!

Kind Regards,
Ramon

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis