Customizing the Icons in Your Image Carousel in BaseKit Print

You can change the icons in your image carousel in BaseKit. While it requires a bit of knowledge in CSS, it can be the finishing touch that makes your site pop.

Getting Custom Icons

The first step to customizing the icons on your image carousel is to have some icons. You can either create the icons yourself, or you can download them from the internet. To start, try searching Google for "free icons."

Using Custom Icons

In order to apply the custom icons, you will first need to upload them to your BaseKit website. Once the images are uploaded:

1. Get the URL of the image.
   1. Select the image in the Media tab.
   2. Click the  icon.
   3. Copy the URL to your clipboard.
2. Add a carousel widget to your page.Double click on the widget, or single click and select the gear icon.
   1. In the Widgets tab, click and expand the Content menu.
   2. Drag and drop the Carousel widget to your page.
4. Select the CSS tab in the settings drawer at the bottom of the page.
5. Use the following code, replacing [URL GOES HERE] with the URL of the image you copied earlier.
   .widget-carousel-previous
{
background-image:url('URL-GOES-HERE')
}
.widget-carousel-next
{
background-image:url('URL-GOES-HERE')
}

Troubleshooting

If your custom images are not showing correctly, you may wish to check for these common errors:

• Ensure that you have made an exact copy of the example above by replacing the URL with the URL of your image
• Make sure the URL is still enclosed in single quotes (apostrophes)
• Ensure you have a complete URL including the http://
• Make sure that there are no spaces before, after or in the middle of the URL
• Check that the curly brackets ( { and } ) have not been removed
• Make sure you only have one copy of the code above