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 :
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
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
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
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.
Doh! I know why! You didn’t include it in your pen. I have it installed locally, so that call works for me.
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.
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!
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
You can add a background colour and a hint of padding to make it look right though:
/* add some space. 0 for top/bottom .5rem for left/right */
padding: 0 .5rem;
There are other ways, but this is easiest.
Thank you! Oh my God I even didn’t think of that. Thanks a lot! It is now looking good on my page!
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
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.