Skip to Content

How to Make an Icon Box Slider for Quick Navigation

Icon box sliders are a quick way to add visuals to functional navigation.

Icons can be found everywhere -- both in the real world and online. Icons can help make content easier to memorize and understand. Appropriate icons can also save space from a potential overload of copy in your website's design. Icons even give your website a touch of personality.

You can combine icon boxes into a slider for engaging and streamline navigation. Rather than a massive drop down list filled with text, condense a user's navigation options to one simple, visuals-inspired icon box.

By pairing some our favorite resources such as Slick Slider and FontAwesome, you can encourage user navigation while maintaining design consistency. Here's the HTML, CSS, and JavaScript needed to bring this unique and functional feature to life:


The HTML just utilizes some standard Bootstrap classes to help format the various boxes within a single carousel container. The FontAwesome classes are then primarily used to include an icon:


The CSS uses some standard styling mixed with hover classes for a professional interactive effect:


Lastly, we just need to use Slick's default initialization code to activate the slider:

With just a few lines of code, you now can have an agency-quality slider that is intutive to users and which enables you to highlight choice links.

Scott Madara
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

Sign up to explore

Create an account in seconds and start building today.

Sign up for Solodev