Bootstrap and Font Awesome not working on Codepen

Bootstrap and Font Awesome not working on Codepen
0

#1

I wrote my portfolio challenge on Sublime and tested it in the browser. It works perfectly. However, when I tried to copy and paste it into Codepen, it looks like it’s not reading the CSS. I triple checked that I did the Bootstrap quick add on the pen. The navigation isn’t rendering. I even tried to put in the 3.3.7 version CDN. Still nothing. Same thing for Font Awesome. All I need to do to finish this challenge is paste this in and have it run. Any suggestions, please? Thanks!


#2

I use both Bootstrap and Font Awesome on all of my projects on CodePen and haven’t had that problem.

The first thing you can try to see if you can get things to work is to simply copy and paste the import lines from Sublime to the HTML section of CodePen.

If that works out well then it’s probably a version thing because the default Bootstrap version from the CodePen quick-add function is 4.0.0 alpha (which you seem to have checked, although do note that things have changed in Bootstrap 4.0.0 and will more than likely break things if you did your project with 3.3.7 in sublime.

In addition, if you are using the CDN version that you get from Font Awesome via an e-mail—that link has to be added to to the JavaScript section of the settings (not the CSS section).

I hope that helps! If not do post a link to your CodePen project so that others can have a closer look for you!


#3

Thank you! I appreciate the response. I did copy and paste initially and that wasn’t working. I was able to get around it by putting the Bootstrap version 3 and Font Awesome CDN’s in the head of the HTML.


#4

I had trouble getting the quick-add bootstrap to work too. This page kind of explained how to add bootstrap to the css settings.