Platform
- CMS
- AI
- Cloud
- Metaverse
- Mobile
- Blockchain
- Digital
- IoT
Pricing
Developers
Enterprise
About Us
Contact

How to Combine FontAwesome with a Slider to Create Quick Links

Getting users quickly to their end destination can be tricky. With strategic icons and simple text, however, you can help your audience quickly find what they need.

If you have a content-heavy website, providing quick links to important destinations on your website is critical for quality customer experience (CX). But, thanks to some clever web design hacks, there are better ways of providing those links than a boring, standard list. Say goodbye to boring link lists, and opt for this slider to save space on your website. In this tutorial, we'll show you how to use the Slick Slider plugin for the slider and FontAwesome for some quick link icon styling.

Getting Started

In order to use FontAwesome icons and Slick Slider with Bootstrap, we need to include all the necessary files but we don't need to download or install any files as we can just simply provide their CDN links on top of our HTML file:

HTML

We basically have a container with a class of "carousel" which holds all of our carousel items and each item contains a link as well as an icon inside that link. The basic mark-up is as follows:

				<div class="col-sm-12">
	<h2>Quick Links</h2>
	<div class="carousel" data-arrows="true" data-autoplay="true" data-items="5" data-items-sm="3" data-items-xs="1">
		<div class="carousel-item">
			<a aria-label="Locations" href="#" target="_blank"> <i class="fas fa-tripadvisor"></i></i> <span>Locations</span> 
			</a>
		</div>
		<!--.carousel-item-->
		<div class="carousel-item">
			<a aria-label="Support" href="#"> <i class="fas fa-firefox"></i>  <span>Support</span> 
			</a>
		</div>
		<!--.carousel-item-->
		<div class="carousel-item">
			<a aria-label="Training" href="#"> <i class="fas fa-paw"></i>  <span>Training</span> 
			</a>
		</div>
		<!--.carousel-item-->
		<div class="carousel-item">
			<a aria-label="News" href="#"> <i class="far fa-twitter"></i>  <span>News</span> 
			</a>
		</div>
		<!--.carousel-item-->
		<div class="carousel-item">
			<a aria-label="Troubleshooting" href="#"> <i class="fas fa-bug"></i>  <span>Troubleshooting</span> 
			</a>
		</div>
		<!--.carousel-item-->
		<div class="carousel-item">
			<a aria-label="Careers" href="#"> <i class="fas fa-linux"></i>  <span>Careers</span> 
			</a>
		</div>
		<!--.carousel-item-->
		<div class="carousel-item">
			<a aria-label="Contact" href="#"> <i class="far fa-github-alt"></i>  <span>Contact</span> 
			</a>
		</div>
		<!--.carousel-item-->
	</div>
	<!--.carousel-->
</div>

According to the WAI-ARIA specifications, we need to add the "aria-label" attribute inside link tags to provide accessibility for the users. The text inside the span element is our actual link text. The label and the link text should be the same.

Using FontAwesome

We use the itag to insert FontAwesome icons i.e:

<i class="fas fa-bug"></i> <!-- 1) fas == FontAwesome prefix  and 2) icon name == bug -->

Keep in mind that you need to include both the icon prefix("fas") and the icon name. We're using FontAwesome version 4.7.0 and you can find the list of the icons here. If you don't include the fa prefix, the icons will show up as blank squares on the page.

Slick Slider

Once we set up our mark-up and choose the FontAwesome icons, we'll configure our slider. You can add the following code to either in your HTML file or create a separate file with an extension of .js and put the code in there:

jQuery(document).ready(function ($) {
	$('.carousel').slick({
dots: false,
infinite: true,
speed: 300,
slidesToShow: 4,
slidesToScroll: 4,
autoplay: true,
responsive: [{
		breakpoint: 1024,
		settings: {
			slidesToShow: 5,
			slidesToScroll: 3,
			infinite: true,
			dots: true
		}
	}, {
		breakpoint: 600,
		settings: {
			slidesToShow: 2,
			slidesToScroll: 2
		}
	}, {
		breakpoint: 480,
		settings: {
			slidesToShow: 1,
			slidesToScroll: 1
		}
	}
	// You can unslick at a given breakpoint now by adding:
	// settings: "unslick"
	// instead of a settings object
]
});
});

First, we select the div having classname of carousel and to tie our slider to it.

dots:You can set the dots value to either true or false. When set to true, dots will be displayed below the carousel.

infinite: When set to true, the carousel items will loop infinitely.

speed:The speed of the scrolling carousel items in milliseconds.

slidesToShow:is the number of slides or carousel items shown on desktop screens.

slidesToScroll:When set to 1, one slide will scroll at a time.

autoplay: when set to true, it will scroll automatically when the page is loaded.

responsive: Breakpoints for responsive display. In our example, we have the breakpoints of "1024", "600", and "480" measured in pixels. We can adjust the breakpoints by changing these pixel values as well as the number of slides or carousel items to show in each screen size.

CSS

Now that we're done with our mark-up and slider Javascript, we can add styling and responsive layout adjustments with CSS:

body {
  background-color: #E8E8E8;
}

a,
a span {
  color: #333;
  text-decoration: none;
}

a:hover,
a span:hover {
  color: #322;
  text-decoration: none;
}

.section_quick_link {
  overflow: hidden;
  position: relative;
  color: #333;
  background: rgba(54, 14, 38, 0);
  padding-top: 50px;
  padding-bottom: 50px;
}

.carousel .slick-arrow {
  position: absolute;
  top: 50%;
  background: url(https://raw.githubusercontent.com/solodev/fontawesome-slickslider-links/master/images/arrow.png) center no-repeat;
  fill: #f1f1f1;
  border-radius: 3px;
  border: 1px solid #333;
  background-color: #333;
  width: 41px;
  height: 41px;
  text-indent: -10000px;
  z-index: 2;
  margin-top: -21px;
  cursor: pointer;
}

.carousel-item {
  background: rgba(255, 255, 255, 1);
  margin: 0 0.6rem;
}

.carousel .slick-arrow.slick-next {
  transform: rotate(180deg);
}

.section_quick_link h2 {
  text-align: center;
  margin-bottom: 50px;
}

.section_quick_link .carousel {
  position: relative;
}

.section_quick_link .carousel .carousel-item a {
  background: transparent;
  text-align: center;
  height: 201px;
  display: block;
  padding-top: 0.6rem;
  margin: 0 auto;;
}

.section_quick_link .carousel .carousel-item a:hover {
  -moz-box-shadow: inset 0 0 20px rgba(112, 112, 112, 0.5);
  -webkit-box-shadow: inset 0 0 20px rgba(112, 112, 112, 0.5);
  box-shadow: inset 0 0 20px rgba(112, 112, 112, 0.5);
}

.section_quick_link .carousel .carousel-item a span {
  font-size: 18px;
  margin-top: 1rem;
  font-weight: 600;
  display: block;
}

.section_quick_link .carousel .carousel-item a:hover span {
  color: #033a71;
}

.section_quick_link .carousel .slick-arrow.slick-next {
  right: -56px;
}

.section_quick_link .carousel .slick-arrow.slick-prev {
  left: -58px;
}

/* Font Awesome Icons */

.section_quick_link .carousel .carousel-item a i {
  font-family: FontAwesome;
  margin: 0 auto;
  font-size: 5rem;
  font-style: normal;
}

/* Media Queries */

@media (max-width: 992px) and (min-width: 768px) {
  .section_quick_link .carousel .slick-arrow.slick-next {
    right: 0;
  }
}

@media (max-width: 1200px) and (min-width: 992px) {
  .section_quick_link .carousel .slick-arrow.slick-next {
    right: -15px;
  }

  .section_quick_link .carousel .slick-arrow.slick-prev {
    left: -15px;
  }
}

@media (max-width: 992px) and (min-width: 768px) {
  .section_quick_link .carousel .slick-arrow.slick-prev {
    left: 0;
  }
}

@media (max-width: 768px) {
  .section_quick_link .carousel .carousel-item a {
    padding-top: 0.8rem;
  }

  .section_quick_link .carousel .carousel-item a span {
    font-size: 20px;
    margin-top: 0.5rem;
  }

  .section_quick_link .carousel .slick-arrow.slick-next {
    right: 15px;
  }

  .section_quick_link .carousel .slick-arrow.slick-prev {
    left: 15px;
  }

  .carousel .slick-arrow {
    height: 50px;
    width: 50px;
  }
}

And there we have it: A fully functioning quick links with a slider:

Download from Github

Share on Facebook Tweet It