Getting Started

Learn how to get started with the SVG icons and Slider Dots

SVG Icons

This template includes some SVG icons that have been added via the embed element.

Inside the embed element we simply add the SVG path which allows us to have control over its color for various states. When using the embed method we are able to control the icons color using the Webflow typography settings, meaning that we can dynamically change the icon and set its hover color without needing to upload a new icon or use some overly complicated method for interaction hovers.

1. To change the style of icon, you can simple a) add a new SVG path into the embed element, or b) delete the embed and add your own image with the same class name

2. To edit the color of the SVG icon, you can simply navigate to the typography color settings and adjust these to suit your color needs

Quick Video Demonstration

Slider Dots

The template includes custom slider dots on the /about page header. For these custom slider dots we use a small bit of custom code to target the webflow default slider dots.

We simply apply CSS properties ontop of these default slider dots. If you aren't familiar with adjusing the styles via CSS, you can simply delete the embed element contained within its div-block.