Hello,
I have been trying to complete this challenge to build my own Product Landing Page, but I have got stuck at the header not displaying it as I was expecting. So then I decided to open a new Pen and copy-paste the code (both HTML and CSS) as it is from the example page on freeCode Camp: https://codepen.io/freeCodeCamp/full/RKRbwL. I wanted to have an experiment with it to see how each section works. Upon copy-pasting it however I have got a big messy view that did not look anything like the example page on above link.
I must be missing something, but can someone please explain what that is as apart from HTML and CSS I did not intend to use anything else, since I am not familiar/trained with the other tools yet?
In the example they did use Font Awesome, you can see that by clicking on the setting icon then click on CSS tab. To be more specific, in the HTML, you’ll see some parts link this <i class="fa fa-x"></i>, this will insert the font (icon) inside the empty <i> tag for you.
You’ll learn about font awesome and some other libraries, frameworks later on in the Front End Libraries Certification section.
Thank you tkhquang. It is awesome indeed. 
I have however clicked on the “settings” icon and CSS tab as suggested, but could not find this font. Perhaps I do not have the correct settings on codepen?
What I have also noticed whilst I carried on browsing for an answer, that the id #nav-bar and the class .nav-link was missing from the CSS code in the original solution when you click on editor’s view, yet it displayed the page perfectly all way along.
Once I added this id and class to my CSS code, I was able to get the logo in line with the nav-links.
I am still not entirely sure why the CSS code appears to be different as opposed to what it displays in the full view? What settings do I need to change exactly on codepen?
I’m not so sure because I don’t know what’s it like in your new pen. Make sure you have CSS Preprocessor in the settings to be SCSS, you’ll learn about this SCSS thing in the Front End Libraries section as well. Basically nested CSS rules don’t work in normal CSS Preprocessor, you’ll need to use SCSS for that. Alternately, you can select from the CSS tab dropdown menu View Compiled... then copy the compiled CSS codes to yours, they are normal CSS codes now.
Also about the Font Awesome, in the example you’ll see this
Look at the link, you’ll need to copy this to your custom pen in order to make it look exactly like in the example.
Thank you so much tkhquang !
It works! So that was the problem: SCCS was not set for CSS preprocessor…
I will grab those awesome fonts into my style-sheet too to see what they do. 
Thanks again - you were a great help!
1 Like