How can I add icons to my website during development?

Shopify Discussion
1

Hi can someone help me with my website development please? I want it to add some icons but I don’t know how.

2

Hi, @SKF_skincare .

Thank you for reaching out!

What type of icons do you want to add to your store? I would be happy to try and help you through here.

We do have Shopify Experts that can help you with the development of your store if you feel that you need extra help in other areas as well.

Please let me know if you have any further questions! I would love to learn more about your business. What type of products do you sell?

Talk soon,

1 Like
3

Hi, thanks for reaching out I want icons like the ones in the picture I attached to this response. I also want the text below the icons. We sell handmade 100% natural skincare cosmetics created for sensitive skin and hypoallergenic purposes. Crafted for all genders, races, ethnicities and ages 3 months and up in cases of eczema or rashes. Our products will provide results in days.

IMG_3493.jpeg
IMG_3493.jpeg1242×1134 41.4 KB

4

Of course! I’d be happy to help you with adding icons to your website. Here are a few general steps you can follow:

  1. Choose an icon library: There are several icon libraries available online, such as Font Awesome, Material Icons, or Ionicons. Select the one that best suits your design needs.

  2. Include the icon library: Once you’ve chosen an icon library, you’ll need to include the library’s CSS or JavaScript file in your website’s code. You can typically find the necessary code snippet or installation instructions on the library’s website.

  3. Find the appropriate icon code: Each icon in the library has a unique code or class associated with it. You’ll need to find the code for the specific icons you want to use. This code is usually provided in the library’s documentation or icon gallery.

  4. Add the icon to your HTML: In your HTML code, find the location where you want to add the icon. Use an appropriate HTML element (such as <i> or <span>) and apply the icon’s code or class to that element. For example:

  1. In this example, the class fab fa-facebook is used to display the Facebook icon from the Font Awesome library.

  2. Customize the icon: You can further customize the appearance of the icon using CSS. For example, you can change the color, size, or add additional styles to the icon.

  3. Repeat the process for other icons: If you want to add multiple icons, simply repeat steps 3 to 5 for each icon.