How to use SASS outside of Code Pen (with browser using less.js)

How do I get SASS to work independent of code pen? I tried to follow there instructions from the Settings menu at Code Pen (“Add External Scripts” and “Add External Styles”). For context, I am working on the Random Quote Generator problem (FCC’s sample solution: https://codepen.io/freeCodeCamp/full/qRZeGZ). Here is the code I was hoping would produce the twitter logo:

<!doctype HTML><html>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/4.3.0/less.min.js" ></script>
<body><i class="fa fa-twitter"></i></body></html>

I tried looking for help, found this (https://stackoverflow.com/questions/19215517/attaching-a-sass-scss-to-html-docs) but what I tried there didn’t help either. I believe I could download the files font-awesome.min.css and less.min.js, and use it that way, but the point is that I wanted to do it through the browser, the same way code pen does it.

Any suggestions?

You don’t need less to use font awesome icons, just add rel="stylesheet" to the font awesome link:

<!DOCTYPE html>
<html>
  <link
    href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"
    rel="stylesheet"
  />
  <body>
    <i class="fa fa-twitter"></i>
  </body>
</html>
1 Like

Thank you so much jenovs. I had tried rel="stylesheet/sass", rel="stylesheet/scss" and rel="stylesheet/css", following that stackoverflow question I read (none of which work).