Hello, I’m currently working on the Product Landing Page project for the responsive web development course for freeCodeCamp. Below is a link to my codepen displaying my work. I want to have a icon go in-front of the header that says “Premium Materials”, “Fast-Shipping” , and “Warrantee Guarantee”. Here is the specific code for the area. Preferably, I would like to use Google Icons for the fonts. In CSS, I’ve tried to use a
::before element for the
<h2> element where the “Premium Materials”, “Fast-Shipping” and “Warrantee Guarantee” are but that hasn’t worked. Any help would be appreciated.
<div class = "main-link-1"> <h2>Premium Materials</h2> <p>Our apparel is made with sustainable fabric.</p> </div> <div class = "main-link-2"> <h2>Fast Shipping</h2> <p>Our items ship in 1-2 business days.</p> <div class = "main-link-3"> <h2>Warrantee Guarantee</h2> <p>Have a full refund on items.</p>