How Do I Place A Icon Infront Of Text

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.
Codepen Link:

<div class = "main-link-1">
    <h2>Premium Materials</h2>
    <p>Our apparel is made with sustainable fabric.</p>
  <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>

Icons are images so use the <img> tag. Remember that images have a height and width so they look like a block but are actually display: inline; unless you change it in the css. Give it a try and see how it looks.

<h2> <i class="material-icons">assignment_turned_in</i>Premium Materials</h2> you can place the icon tag inside the h2 tag it would display them in the same line and then resize the icon to your liking using the icon class in css

Point of order, that is actually the italic tag. Granted it has been co-opted for icon use.

Use flexbox!
Creat a container for items and flex them.

Or use grid !
Create a grid container and items.
Add columns
Add rows
Align them horizontally/ vertically

Note :Start using grid and flexbox …they are much fun to use.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.