The Problem

This project is built with Hugo and uses the Minimal Hugo theme.

This post is part of an ongoing effort to tailor the theme over time.

In this post, we’ll look at changing the page navigation icons on list pages. For our purposes, the arrows used at the bottom of each list page are too small, making them difficult to click.

The Process

As has been mentioned before, because Hugo offers so much flexibility and produces pages in such a layered way, it can be difficult to find the right place to make the necessary alterations.

Figuring out what to change

Before figuring out how to make a change, we’ll first have to figure out what to change.

One simple approach is to open the website in the Chrome browser, navigate to the page in question, right-click on the element in question, and select Inspect. This will bring up Chrome Developer Tools for that element.

In this case, if we click on the left arrow we’ll see that the element is defined in the line <i class="fa fa-arrow-left"></i>

Searching for that element in our project in VS Code brings us to the paginator.html file in our layouts/partials folder.

A web search for fa-arrow-left reveals that it is an icon from Font Awesome, which matches what we find in the theme’s files.

Now we know what that we need to change the fa-arrow-left and fa-arrow-right elements.

Figuring out how to make the change

Next we need to figure out how to make those icons larger.

A web search for changing the size of font awesome icons reveals quite a few options, but the most immediately accessible seems to be adding an addendum to the elements class, as demonstrated here.

The Solution

Only one small change to each element is necessary to make the icons larger.

In the paginator.html file, we add the fa-3x addendum to each element.

<i class="fa fa-arrow-left fa-3x"></i>

<i class="fa fa-arrow-right fa-3x"></i>