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, you’ll need to upload or embed the icon and align it with text using Flexbox. Here’s how to do this step-by-step:

1. Locate the Icon

• If the green checkmark circle icon already exists in your Assets panel (from uploaded photos), open the Assets tab (the small folder icon in the left toolbar).
• If not, upload it by clicking Upload in the Assets panel and selecting the image file.

2. Add a New Div Block for Each Item

• In your "For Instance" section, drag a Div Block into place for each bullet item (e.g., a coaching example).
• Set this Div Block to display: Flex (horizontal/default direction) to place icon and text side by side.

3. Insert the Icon and Text Inside the Div Block

• Drag an Image element into the Div Block and select the green checkmark icon from your Assets.
• Then, drag a Text Block or Paragraph element right next to the icon (inside the same Div).
• Adjust padding/margin as needed to create spacing between the icon and the text.

4. Style for Consistency

• Set a consistent icon size (e.g., 24x24 px) using the Style panel.
• Align the icon and text vertically via Flex settings (e.g., Align: Center).
• Duplicate the Div Block for other "For Instance" items and modify the text.

5. Optional: Use a Font Icon Instead

• If you'd prefer scalable icons, you can use libraries like Font Awesome by embedding their CDN in Project Settings > Custom Code > Head.
• Then add a text element and manually assign a class to use their check-circle icon.
• Note: Webflow doesn’t natively support icon libraries so this method involves light custom code.

6. Video Tutorial Option

A good reference is (Webflow’s YouTube tutorials) or a targeted search like “How to align icon and text in Webflow using Flexbox” on YouTube. Since you requested a video, here are specific sources:

• Search: “Webflow Bullet Points with Icons” on YouTube.
• Example video: “How to Use Icons with Text in Webflow” by Pixel Geek or Flux Academy.

Currently, Webflow doesn’t provide a built-in system to search via photo for a specific icon within your project, so make sure the green checkmark is uniquely named in Assets.

Summary

Upload the green checkmark icon to Webflow, use a Flexbox layout inside a Div Block to position it next to your text, and style spacing accordingly. You can reference Webflow tutorials on YouTube for visuals by searching for icon + text alignment tutorials.