How to Add Icon Boxes to Your Homepage Slider

While your website's main hero or slider section is ideal to present your organization's initial branding, navigation elements can help brand your website more. A select list of quick links underneath provide greater navigational options to your users. Combined with choice icons, you can further extend your branding in a concise design space.

Here's how to add icon boxes to your homepage slider: 

HTML

CSS

Now to add the other stylistic elements of the icons themselves:

@import url('https://fonts.googleapis.com/css?family=Montserrat'); body{ font-family: 'Montserrat', sans-serif; } .slick-dotted.slick-slider { margin-bottom: 0px!important; } .slick-dots { bottom: 10px; } .boxes{ background:#202a35; } .product{ cursor:pointer; min-height:250px; display: table; width: 100%; float:left; } .product:hover { background-color: #0d1017; } .product:hover:active { background-color: #0d1017; } .content{ display: table-cell; width: 100%; vertical-align: middle; } .column{ padding-left:0px; padding-right:0px; } @media only screen and (max-width: 1199px) { .boxes .column { border: 1px solid #0d1017; } } .boxes .column + .column { border-left: 1px solid #0d1017; }

"Ain't they a beaut?" Not only was this tutorial a functional way to further brand your website, it's a genuinely appealing visual element. Be sure to adjust your browser window to see how the tutorial looks on various screen sizes.