How can I add icons next to text in the "For Instance" section of my UX Coaching page on Webflow? Can someone provide a video tutorial? The icon I want to use is the green checkmark circle shown in my photos.

To add icons next to text in the “For Instance” section of your UX Coaching page in Webflow and use a specific green checkmark circle image, follow these visual and structural steps.

​

1. Upload Your Icon Image

​

• Go to the Webflow Designer and open your UX Coaching page.
• In the Assets panel (Press J or use the folder icon), click Upload and choose the green checkmark circle image from your computer.
• After uploading, it will appear in your asset library.

​

2. Structure the Content Block

​

• In the For Instance section, locate or create the block where each text item should have an icon.
• Add a new Div Block for each item (or use an existing one if styled uniformly).
  • Inside the Div Block, first drag in an Image element from the Add panel.
  • Select the green checkmark from your Assets.
  • Next to it, add a Text Block or Paragraph element with your desired text.

​

3. Style the Icon and Text Layout

​

• Select the parent Div Block containing the icon and text.
  • In the Style panel, set Display: Flex and choose horizontal alignment (Row).
  • Set Align: Center to vertically align the icon and text.
• Adjust margin or padding between the icon and text, e.g., give the image a right margin of 8–12px.

​

4. Reuse Using Symbols or Combo Classes

​

• If you’ll use this icon-text combo repeatedly:
  • Make it a Symbol or
  • Use a combo class for consistent styling across instances.

​

5. Optional: Add Responsiveness

​

• Check layout responsiveness in Tablet and Mobile views.
• Reduce icon size proportionally if needed or stack vertically using media queries (not directly in Webflow, but via breakpoints and display changes).

​

6. Video Tutorial for Reference

​

While I can’t provide a custom video, you can watch a relevant workflow in this official Webflow video tutorial showing how to use icons with text combinations using flexbox:

​

Webflow University → “CSS Flexbox in Webflow”  

Link: https://webflow.com/university/lesson/flexbox

​

Or for imagery:

Webflow University → "Add and configure images"  

Link: https://webflow.com/university/lesson/add-and-configure-images

​

Summary

​

To add icons next to text in your For Instance section, upload your icon, use a flex layout with a Div Block containing an Image and Text, and style their spacing and alignment. Use Webflow's built-in tools like symbols or classes to reuse the layout efficiently.