Custom icon for jet smart filters plugin pagination widget

[Joliamendi]

Please, describe the feature request, making it clear to understand.

Hi @SargasTM , Good time!

It seems that you are the developer of jet smart filters plugin. I wanted to request you, please add the possibility of inserting a custom icon to the pagination widget. Currently, it is only possible to use Prev Text and Next Text. It's really cool and needed to be able to use custom icons for the Prev and Next arrows :

Actually, it would be nice to have an option to choose between text and icon for the Prev and next button.

Please consider this request. it's too important.

[Joliamendi]

Hi again @SargasTM , Another important feature about the pagination widget...

Please add two width and height options for pagination number box if possible. Currently, the size of the boxes is different in single digit and double digit numbers and this affects the ui : https://prnt.sc/U-xq7pO3q1ZA

Please add custom width and height option🙏

[Michaelgimii]

+10000

[morosmo]

+100000000000

[Lonsdale201]

Option 1 if would like to use Fontawesome:

Paste the html inside the text box like: Source: https://fontawesome.com/icons

Add the following css:

.jet-filters-pagination__link i {
    font-family: "Font Awesome 5 Free"; font-weight: 900; font-style: normal;
    font-size: 14px; /* icon size */
    color:  white; /* icon color */
    padding: 10px; /* Padding if need */
    backgound-color: red;   /* Bg color only for the icon if need */
}

Option 2:

You can use other svg, img(not inline) :

.jet-filters-pagination__link .mysvg {
    content: url(http://examplewebsite.com/uploadsfolder/custom.svg);
    height: 10px;
    width: 10px;
}
.jet-filters-pagination__link .mysvg2 {
    content: url(http://examplewebsite.com/uploadsfolder/custom.svg);
    height: 10px;
    width: 10px;
}

with :hover ( .jet-filters-pagination__link:hover .mysvg ) you can switch the content to replace another img

[Lonsdale201]

Hi again @SargasTM , Another important feature about the pagination widget...

Please add two width and height options for pagination number box if possible. Currently, the size of the boxes is different in single digit and double digit numbers and this affects the ui : https://prnt.sc/U-xq7pO3q1ZA

Please add custom width and height option🙏

Understand this request, its a bit of tricks, but you can do this with the following codes:

.jet-filters-pagination__item:not(:first-child):not(:last-child) {
    width: 125px;
    height: 45px;
    /* background-color: red; */
}

.jet-filters-pagination__link {
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
}

If you don't want the width to be valid for pagination, you can put an exclusion in the css for the first and last child element. But if you use a background color you have to set the height on the child class, too, and preferably with equal values. Because the height of the parent element is different in this context. And instead of the given display, use Flex et, for space utilization, so if you change the height, it will be easier to center the numbers inside. Flex is only needed if you want to adjust the height as well. Btw this is also a good suggestion, hope it gets included in the future.