Scroll Down Arrow: Font Awesome Icon

What does this code do?

This code snippet will allow you to add a scroll down arrow that when clicked scrolls the visitor down to a specific spot on the page.

Note: This code snippet uses Font Awesome for the arrow. To use a custom image, check out this code snippet.

Code Snippets

Font Awesome Script

This code snippet uses Font Awesome for the arrow. To use Font Awesome, you will need to copy and paste your personal Font Awesome Kit Code into Settings > Advanced > Code Injection > Header. You only need this script once per site, so if you are already using Font Awesome Icons on this site, you can skip to the next code snippet.

To learn how to get your own Font Awesome Kit Code, click here. It will look something like the following.

<!-- Font Awesome Icons -->
<script src="https://kit.fontawesome.com/12345abcde.js" crossorigin="anonymous"></script>

Anchor Link

Copy and paste this code into a Code Block at the top of the section you would like the scroll to.

<div id='ANCHORNAME'></div>

Change ANCHORNAME to a unique name of your choice. Make sure to use the exact name in the next step.

Scroll Down Arrow

Copy and paste this code into a Code Block where you want the scroll down arrow to be.

<div id="scrollDownArrow" style="display: flex; align-items: center; justify-content: center;">
  <a href="#ANCHORNAME"><i class="fa fa-angle-down fa-4x" aria-hidden="true"></i></a>
</div>

Change ANCHORNAME to the name you used in the previous step. Don’t forget to keep the # in front.

CSS

Copy and paste this code into Design > Custom CSS.

/* Smooth Scroll */
html {
  scroll-behavior: smooth;  /* makes the scroll smooth and not jumpy */
}

If you would like to move the arrow down slightly, copy and paste this code into Design > Custom CSS.

#scrollDownArrow {
  position: relative;
  bottom: -5vw; /* moves the arrow down */
}

Customize

Change the Icon

The following code sets the icon. Go to Font Awesome and find the icon you want to use. Click on the icon and copy and paste the class for that icon in place of fa fa-angle-down.

class="fa fa-angle-down fa-4x"

Resize the Icon

The following code sets the icon size. Go to Font Awesome Size Guide to see your size options. Then you can change fa-4x to the size you would like.

class="fa fa-angle-down fa-4x"

Change the Color of the Icon

To change the color of the icon, copy and paste the following into Design > Custom CSS. Then change the word red to the color you would like. You can use a word or rgb, hex, or hsl color code.

/*Scroll Down Arrow Color */
#scrollDownArrow i {
  color: red;
}

How To Use It

1. Copy and paste the code as indicated above.

2. Customize the anchor name, the icon, the size, the color, and the position.