How to display a CSS shape inline with a title

Hi! I’m working on my tribute page (it’s about my cats…), and I wanted to put a CSS heart shape in the middle of my h1 text. So, it should look like “CatName <3 OtherCatName” all in one line. I can’t get this to work. The heart either covers my h1 text, or it breaks the h1 text and css heart into 3 separate lines.

I’ve tried googling it and I think the fix may be making the shape float, or using inline block or something? But I’m not really sure how to implement those yet, and my trial-and-error attempts haven’t worked. Can anyone help?

Here’s what my code currently looks like:

How about using just one <h1>?

Like
<h1>Penelope <span id="heart"></span> Pepperoni</h1>

Penelope Pepperoni

That works. Add the link element in the head section of your HTML code or just at the top of everything.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<h1>Penelope <span id="heart"><i class="fa fa-heart-o"></i></span> Pepperoni</h1>
  
</body>

That works. Add the link element in the head section of your HTML code or just at the top of everything.

1 Like

That did work! I guess the problem was with the particular CSS shape I was using…It was an actual shape, not something from a font library, I think? So, just using one h1 element didn’t work, because the heart appeared in front of the header, but using one h1 element plus the heart shape as provided by VidhYasa did.

Thanks!