Portfolio - How do I add ::after FontAwesome pseudo content on <hr>?

Hi there,

I am trying to build a portfolio page. Identical to https://codepen.io/freeCodeCamp/full/YqLyXB and I got stuck with adding </> FA icon to


I am not sure how to make it work. That’s my code in :

hr::after {
font-family: FontAwesome;

Here’s a link to my pen https://codepen.io/TinkApp/pen/BZMvGR?editors=1000

I’m guessing you’re trying to move that icon to the center of the hr tag.

I found this (https://codepen.io/ibrahimjabbari/pen/ozinB?editors=0100) while searching to see if it’s possible. Something like that the ‘heart’ hr? Look at the rules for .style15.

Great idea, by the way. I wouldn’t have thought to style my hrs like this.

thanks, I already read this one and read a bunch of other stuff and am still stuck. Actually, the FA icon doesn’t pop up on my web page at all.

In fact, I just did that quickly; copy and pasted that style and switched the content: declaration.

Before going on, you should take everything inside the style tag and put it in the css tab on codepen. Same if you have any scripts. It’ll be a little easier to work with. There are a couple other “codepen niggles” too (no need for a body tag in the html tab. google fonts can go into the head textarea in settings), but they won’t stop your code from working. You can look at those later. :slight_smile:

1 Like

Doh! I know why! You didn’t include it in your pen. I have it installed locally, so that call works for me.

1 Like

Thank you, Dave! Let me play around with your code now. Many thanks - again

No worries at all. That’s why we’re all here.

I made a quick image to show you how you might restructure your code. You aren’t required to, but it’s preferred. Definitely add that FA library and keep going.

Ins’t the FA library integrated in Bootstrap? I added Bootstrap before I started working on the project.

Bootstrap does have an icon library, but it isn’t FA. It’s glyphicons.

It also looks like they removed that from bootstrap4… probably because FA has become so popular.

1 Like

with your help I re-structured the page and I indeed got the FA icon working now. I had no idea that the library was missing. Thank you!

1 Like

Hi Dave,

I am for some reason getting the hr and the FA icon overlapping. See my code here: https://codepen.io/TinkApp/pen/BZMvGR?editors=1100

Any idea why?

The icon has no background and because it’s been positioned, it has no way of “pushing” the hr away.

You can add a background colour and a hint of padding to make it look right though:

hr::after {
      font-family: FontAwesome;
      display: inline-block;
      position: relative; 
      top: -15px; 

      /* add some space. 0 for top/bottom .5rem for left/right */
      padding: 0 .5rem;
      background-color: #fff;

There are other ways, but this is easiest.

1 Like

Thank you! Oh my God I even didn’t think of that. Thanks a lot! It is now looking good on my page!

Hi Dave,
Do you know why if I remove display: inline-block; the hr element and the pseudo element don’t get damaged? I am trying to understand what’s the added value of using display: inline-block; in this case.

You might be right here. We usually add display: inline-block when we need styles that aren’t meant for inline tags (span, strong, i, a, and others).

If you try to set a width to something like a span or i, the style won’t work because these tags aren’t supposed to have width and height. That should be decided by their parent tag and their use (they’re usually in the middle of a paragraph). Adding inline-block lets them stay in the middle of the paragraph (or wherever they are) while still being able to set width and height.

1 Like