Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author joesexton00

    (@joesexton00)

    It is possible for the font awesome font package to cause conflicts with the plugin due to two instances of font awesome being loaded on the page. There are a few solutions at my support page in the troubleshooting section: https://www.webtipblog.com/scroll-back-top-wordpress-plugin/.

    The first solution is to set the plugin to use “Custom Text” instead of an icon as the label. This may not be the most ideal solution, but if no icons are used then the plugin will not try to include the font-awesome library and will not cause a conflict.

    A second solution is a little more code intensive. The plugin offers a filter for the HTML output of the button. The idea is to set the plugin to use “Custom Text” but then set the “Custom Label Text” text box to contain no text at all. This will not load the plugin’s version of font-awesome and will render an empty button. The next step is to apply the filter in your theme’s functions.php file to add the font-awesome icon manually. Here is an example of a code snippet you could include in functions.php to insert an icon into the button’s “Custom Label” area. This will use your theme’s version of font-awesome and cause no conflicts.

    add_filter('sbtt_button_markup', 'my_scroll_back_to_top_filter');
    function my_scroll_back_to_top_filter($text) {
      $text = str_replace(
        '<span class="scroll-back-to-top-inner">',
        '<span class="scroll-back-to-top-inner"><i class="fa fa-arrow-circle-up"></i>',
        $text
      );
    
      return $text;
    }

    The ‘<i class=”fa fa-arrow-circle-up”></i>’ is the icon for font-awesome. To see more options, including the icons I included in the plugin, go to https://fortawesome.github.io/Font-Awesome/icons/. I should also note that this is the recommended method to add your own icons from any icon library if needed to match a theme.

    I hope this helps!

    Thread Starter tomramsden

    (@tomramsden)

    Hi joesexton00, that’s perfect!

    Thanks a lot for the quick and in-depth response ??

    Thread Starter tomramsden

    (@tomramsden)

    Marking as resolved.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Conflicting with Font Awesome?’ is closed to new replies.