How can I add custom icons with text to my website?

Shopify Discussion
1

Hi, could somebody show me how to put custom icons with text under them on my website? I’m stuck on developing my website to a more professional look. Help please!

2

Certainly! To add custom icons with text underneath them on your website, you can use HTML and CSS. Here’s a step-by-step guide:

  1. Choose the icons you want to use. You can find free icon sets online or use icon libraries like Font Awesome or Material Icons.

  2. Add the necessary HTML structure to your webpage. For each icon and text combination, you can use the following code:


  

    
  

  
    Your text here

Style the icon container, icon, and text using CSS. You can customize the styles to match your desired look. Here’s an example CSS code snippet:

.icon-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.icon {
  font-size: 24px;
  /* Add any additional styling for the icon */
}

.text {
  text-align: center;
  /* Add any additional styling for the text */
}
3

Hi thanks so much for your response, is it possible for you to give me some good websites to find the icons? Also I want the icons to move. It won’t allow me to upload a video to show you.

4

one other thing what’s a website for CSS animation? please

5

HI @SKF_skincare ,

Would you like to display like attached images?

Akibhusen_0-1684752069103.png
Akibhusen_0-1684752069103.png292×153 1.22 KB

6

Kinda but like this however I want it present on my home page and the icons are in motion once you scroll down pass them

IMG_3493.jpeg
IMG_3493.jpeg1242×1134 41.4 KB

7

From what I understand, you want the animate the icons when you scroll down to that section. Am I right?

Do you just want to animate icons only or the whole section? It might require some additional development and a jQuery library based on what you want.

8

Yes you are correct I want them the outlines of the icons to animate like the Facebook sign in this link : https://www.shopify.com/partners/blog/69475267-how-to-upload-and-animate-svg-icons-in-3-simple-steps when I scroll pass them. I want the whole section. Idk how to actualize what I want into my storefront.

9

Hi @SKF_skincare ,

Have you sorted out the workaround for the custom icon on your site?

Here’s an option for your consideration - it’s the icons with text with animation effects to both icons and text elements (not the animation of the outlines of your icons, though)

If it’s what you consider, you might want to check out a few samples below to see if it’s a fit for your case - you will see the icon’s animation when scrolling the page:

Disclaimer: All pages above used our Easy Content Builder (which is free) to add Icons with Text section.

*PS. You can simply add the Icons with text (using SVG icons) easily through your Theme Editor.