Need help with adding symbols to project

This is my project

Trying to add a symbol library for inline symbols, but when I do, it messes up my font everywhere.

Here is the symbol library I’m trying to add:

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Anywhere I place this in my code messes up my font and spacing, etc.

Help would be greatly appreciated.

Thanks.

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.

markdown_Forums

Hi @Myzerberries, welcome to the forums. I’m not sure if I’m correctly understanding your question but I think this is what you’re asking.

  • codepen only expects the code you’d put within the <body> </body> tags in HTML. (No need to include the body tags). For anything you want to add to the <head> click on the ‘Settings’ button. So the link to Bootstrap would go in the box labeled “Stuff for head”

Apologies if I missed what you’re asking.

The W3.CSS Framework has default settings for fonts and other elements. You can use the framework classes to adjust things, like the font-size. Or just don’t use the framework if you don’t need it.

This did it thank you.

1 Like