Button icons

Ask the Community General Questions
1

Button icons. No counter. Just links.

1 Like
3

Hello there and welcome aboard @user6171 :wave:

Could you please elaborate on what you mean? It would be awesome if you could share a screenshot of what you’d like to achieve :slightly_smiling_face:

4

Hi Max, Thank you for your welcome greeting. :smile: :wave:

Project: I’m working on a project for my organization’s website where I need a series of button icon links. (Screenshot 1 attached)

Goal: When a user clicks on one of the icons or text, it should link to a specific section on our website.

Elfsight has an existing widget that comes very close to what we need. - The Elfsight Number Counter (Colored Icons) is almost perfect, but we don’t need the Number Counter aspect of it.

Request: Could you assist us in creating or modifying the widget to meet these requirements?

My organization currently uses the Elfsight Calendar widget, and we are very satisfied with it! Social Services Programs and Resources - St. Petersburg Housing Authority - RISE | St. Petersburg, Florida

Best regards,
Nick

Screenshot_icon_button_links

1 Like
5

Hi there @user6171 :wave:

I guess our Social Media Icons app would be just the thing for you.

You just need to upload your custom icons and the needed links:

image
image395Ă—926 24.3 KB
image


Give it a try and let me know if it suits your case :wink:

1 Like
6

Hi Max,

Elfsight has an existing widget - The Fastfood Restaurant Menu.
Request: Could the menu links go to a website page? (As opposed to opening a pop-up window.)

Thanks,
Nick

1 Like
7

Hi @user6171 :wave:

I am sorry, but it’s impossible to add links to the menu items. And could you please specify why the Social Media Icons app doesn’t work for you?

8

Hi Max,

Does the Social Media Icons app allow text (under / or next to) the icon? - Also is it possible to have two rows?

Thanks,
Nick

1 Like
9

Hi @user6171 :wave:

Unfortunately, there is no option to add a text under the icons, but you can display them in several rows:

.global-styles,
:root {
  --columns: 3;
  --icon-size: 82px;
}

.eapps-social-icons {
  display: flex;
  flex-wrap: wrap;
  width: calc(var(--columns) * var(--icon-size) + 30px)!important;
}

.eapps-social-icons-item {
  width: calc(100% / var(--columns) - 10%) !important;
}

This code should be added to the Custom CSS field on the Style tab of your widget’s settings.

Columns and icon-size settings in the code allow you to adjust the number of columns and the size of the icons :slightly_smiling_face: