Technical Documentation Project and Font Awesome

Hi, I just completed my Technical Documentation project. I used Font Awesome arrow icons to display according to screen sizes. For example, in the left navigation menu, those right facing arrows stay displayed until the screen gets smaller and the menu stacks on top. Then, the main doc upward circled arrows appear for smaller screens to navigate to the top. My display css properties work fine on my local server but not on Codepen. Is there a way to fix this? Thanks!

Hi @kerry.wick !

I think your page looks good.

As for the arrows, I didn’t see any issues with it.

Thank you! I appreciate the feedback. :slight_smile:

You have to add !important to the rules to overwrite the Font Awesome styles.

1 Like

The reason why it works locally is because of the load order of the CSS. On Codepen your CSS is added to the head inside a style element and the lib CSS is loaded after because of how you are loading it.

If you instead go to the Codepen Settings and add the Font Awesome CSS to the CSS section (“Add External Stylesheets/Pens” or the HTML "Stuff for <head>") it will work without the !important as well.

1 Like

Sweet! That fixed it :slight_smile: Thanks for the info!

1 Like