Hover Box Sidebar Widget

Now that the styles are in you can go ahead over to Appearance > Widgets and create a new Custom HTML Widget in your Main Sidebar (or any custom sidebar) and paste your box into the content.

To get an alternating left-right icon style apply the hover-box-icon-left class to the icon HTML in the boxes you want the icon to appear on the left:

<i class="hover-box-icon hover-box-icon-left md-icon-star"></i>

As for the icon itself, you can use any of the built-in MD font icons and simply change out the class, as highlighted in red above.

Add Font Awesome to Your Site

If you need a greater variety of font icons to choose from, consider adding the great Font Awesome library to your site. Once installed, you can simply swap out the MD icon class code (see above) with the ones Font Awesome provides you.

To install Font Awesome with some extra goodies, check out the Better Font Awesome plugin, or simply include the following tag in the Appearance > Marketers Delight > Settings > Header Scripts section:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

3 comments comments closed

    • I hope to see them on your site, they’d go great with your design!

  1. Hi Alex, can you check if this instruction is still okay? I have followed but when I paste the code into text, it shows up like this:


    Set Your Own Box Title Here

    Get now