Shopify Question posted in
The Shopify help center can be found here.

slider icon not displaying in html – Shopify

I have bought an html template from themeforest, the main slider has 3 images, with next and previous buttons, but the icons are not displaying in the next and previous button instead box is shown as in the image below:

enter image description here

in the browser its showing the following codes for the icons while i am inspecting the page:

<div class="tp-rightarrow tparrows gyges tp-forcenotvisible" style="top: 50%; transform: matrix(1, 0, 0, 1, -60, -20); left: 100%; visibility: hidden; opacity: 0;"></div>

but in my editor this code is not there and i am not able to find where the next and previous buttons are coming from

this is the demo website https://preview.themeforest.net/item/jewels-responsive-shopify-theme/full_screen_preview/20323802
can anyone tell me why is this problem?

Tags:

3

Answers


  1. 0

    Font are missing check the console.

    enter image description here

    Login or Signup to reply.
  2. 0

    The problem is that the revicons ttf font is not found on the server.

    If you have a look at your console, u see this: enter image description here

    In the before pseude element of .tparrows, it uses exactly this font:

    enter image description here

    Login or Signup to reply.
  3. 0

    As you can see in the demo the fonts are not getting loaded properly. It should look in the below way. Just place the below code in your css, You will notice the change

    .tparrows.tp-leftarrow:before {
    content: '03C';
}
.tparrows.tp-rightarrow:before {
    content: '03E';
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search