[Samuel AParticipant]

Hello,

I´m managed to change the Slider bullets but can´t figure why I can do the same with the arrows. I´ve this code:

.tp-leftarrow { background:url(http://detectivesalvaje.com/integrar1/wp-content/uploads/2014/06/ArrowLeft.png) no-repeat center !important; width:119px; height:269px; }

I also tried:

.tp-leftarrow.tparrows.default { background:url(http://detectivesalvaje.com/integrar1/wp-content/uploads/2014/06/ArrowLeft.png) no-repeat center !important; width:119px; height:269px; }

But I still get the same arrow you can see in detectivesalvaje.com/integrar1 (last slider on the page) .

Could you help me please?

Thanks!

[RadModerator]

Hi Samuel,

Thank you for writing in!

The arrow uses font awesome icons which is actually a text/font. You could find available icons here http://fortawesome.github.io/Font-Awesome/cheatsheet/.

Or if you want to use some graphical icon just like your css, then I would need to check your slider first. Right now, there is no enabled arrow that I could see. And please remove any css added so it won’t hinder to the fix we will recommend.

Let us know.

[Samuel AParticipant]

Hello,

Interesting! Thanks for your reply. The last slider on detectivesalvaje.com/integrar1 (the Sponsors slider) has arrows enabled. How can I change them for the fa-angle-left and fa-angle-right icons?

Thanks!

[RadModerator]

Hi Samuel,

The graphics arrow is larger than the slider itself, so I’ll define a smaller width.

.tparrows:before {
content: "";
display: none;
}
.tp-leftarrow {
background: url(http://detectivesalvaje.com/integrar1/wp-content/uploads/2014/06/ArrowLeft.png) no-repeat;
width: 50px;
height: 100px;
line-height: 100px;
display:block;
}
.tp-rightarrow {
background: url(http://detectivesalvaje.com/integrar1/wp-content/uploads/2014/06/ArrowRight.png) no-repeat;
width: 50px;
height: 100px;
line-height: 100px;
display:block;
}

Let us know.

[Samuel AParticipant]

I can´t make this work 🙁

Could you guide me to use the Font Awesome icons in the slider? For example… I want to use the “fa-angle-left” and “fa-angle-right” icons without the circle background. What do I need to change?

Thank you.

[ChristianModerator]

Hey Samuel,

Please try

.tp-rightarrow:before {
content: "\f105";
}

.tp-leftarrow:before {
content: "\f104";
}

We’re sorry the code above doesn’t work. We missed the :before selector. You can try the code above again adding :before to .tp-leftarrow like .tp-leftarrow:before.

Hope that helps. 🙂

[Samuel AParticipant]

This reply has been marked as private.

[ZeshanMember]

Hi Samuel,

I have fixed the issue and added the arrows to your slider. The updated CSS code is:

.tp-rightarrow:before {
content: '\\f105';
}

.tp-leftarrow:before {
content: '\\f104';
}

Hope this helps. Please let us know if you still face any issue, we will be happy to assist.

Thank you

[Samuel AParticipant]

Hello,

This works 🙂

One last question: How can I remove the background circle? I just want to display the white arrows.

Thanks!

[ZeshanMember]

Hi Samuel,

Thank you for writing in!

Please add the following code to Customizer > Custom > CSS to remove the background from slider arrows:

.tp-leftarrow.default, .tp-rightarrow.default {
   background-color: transparent;
}

Hope this helps. Please let us know if you face any trouble, we’ll be happy to assist.

Thank you.

[Samuel AParticipant]

Hello,

The last code worked. Now I just want to tell you about a strange thing with Customizer: each time I save something in Customizer the two slashes (content: ‘\\f104’;) disappears and I have to write them again.

Besides that, everything works great. Thanks,

[ChristianModerator]

Hey Samuel,

Please try changing your WordPress database character set (see http://codex.wordpress.org/Converting_Database_Character_Sets).

Thanks.

[Author]

Posts