How to use custom svg for scroll to top icon

  • Hi,

    How to use a custom svg for the scroll to top icon? It currently uses and loads the font awesome library only for that one icon (I use svg for all other icons on the site).

    Please help, thank you!

    yours sincerely,

    Nick

    The page I need help with: [log in to see the link]

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

  • Hi,

    Unfortunately, there is no option to use custom Icons for now.

    But you can try with another way, copy the scroll to top file in your child theme and replace the Icon with your SVG file.

    Thread Starter birdbrainsolutions

    (@birdbrainsolutions)

    Hi Abhishek,

    Thank you for your reply. Do you mean copy the php file only or other files as well (js, etc)?

    Could you please explain in steps how to do it? Thank you!

    btw, I know how to create a child theme and enqueue files, just would like to know how to do it properly

    yours sincerely,

    Nick

    Hi,

    Copy the /oceanwp/partials/scroll-up.php file into the child theme following the same path and add the svg icon there as per your need.

    Thread Starter birdbrainsolutions

    (@birdbrainsolutions)

    Hi Abhishek,

    Thank you for the reply. I tried this:

    // Get arrow.
    $arrow = apply_filters( ‘ocean_scroll_top_arrow’, get_theme_mod( ‘ocean_scroll_top_arrow’ ) );
    $arrow = $arrow ? $arrow : ‘https://smarah.pleskwp.tk/wp-content/uploads/2020/11/004-power.svg’;

    but it didn’t work. Which part to replace exactly? Thanks!

    edit: I placed the php file in /child-theme/partials/ folder

    yours sincerely,

    Nick

    HI,

    We can only guide you to alter the theme functions. The above code is not working because you are using an image instead of an icon class. To use an image, you have to edit the HTML code and place the image URL there.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How to use custom svg for scroll to top icon’ is closed to new replies.