How to add a button to the footer widgets with HTML

[Valentin.M]

Hello,

I’m sharing a tip I found for adding links at the bottom of the page in the form of a button.

Here are the steps to follow :

STEP 1 : Appearance > Widgets

STEP 2 : Add ‘Custom HTML’ widget

STEP 3 : Add HTML code

Add the widget at the desired position and copy this HTML code :

<a class="button button--primary hp-button hp-button--wide" href="https://www.instagram.com/ target="_blank" rel="nofollow">
<img src="https://URL-OF-YOUR-WEBSITE/wp-content/plugins/hivepress-social-links/assets/images/icons/instagram.svg" title="Instagram" alt="Instagram" class="social-logo">
Instagram
</a>

“href=” your custom url
“img src=” url of the logo registered on Hivepress

To add a white space between each button, add the following HTML code :

<br> &nbsp;

STEP 4 : Customize logo

To modify the logo, you need to find the logo registered in Hivepress and copy the url where it is registered.

To customize the logo size, add this CSS code to the additional CSS (Appearance > Additional CSS) :

.social-logo {
  width: 22px;
  height: 22px;
    margin-bottom: -5px;
    margin-right: 5px;
}

Here a list some icons :
https:/URL-OF-YOUR-WEBSITE/wp-content/plugins/hivepress-social-links/assets/images/icons/website.svg
…/icons/instagram.svg
…/icons/facebook.svg
…/icons/app-store.svg
…/icons/google-play.svg
…/icons/email.svg
…/icons/linkedin.svg
…/icons/youtube.svg
…/icons/pinterest.svg
…/icons/tiktok.svg
…/icons/tripadvisor.svg
…/icons/vimeo.svg

I hope you find it useful.

[andrii]

Hi,

Thank you for the solution, it will be useful for our community.

[Valentin.M]

Thank you.

Do you have an icon library to recommend ?

Because the following libraries are not supported by Hivepress :

-. Font Awesome | Find Icons with the Perfect Look & Feel
-. Bootstrap Icons | Official open source SVG icon library for Bootstrap

[andrii]

Hi,

Please note that Font Awesome is only for ListingHive (and, in general, in HivePress if you use a third-party theme with an extension). In premium themes, we use Line Awesome — Free Beautiful Icon Font