Icons dont show in built-in texteditor

HTML-CSS
1

Hi!
I’m having trouble adding icons to my product landing page and portfolio; first i write the code in vs studio and the icons work fine, but they dont seem to work using the built in texteditor on codecamp, I’m really not sure what I’m doing wrong, I’ve tried different ways of linking the source but I cant get it to work, despite of the icons showing just fine when opening the file in my browser from my drive.

I’ve checked the magazine section where social media icons are used but fontawesome seems to cost $ and/or has only a limited free trial.

Would really be happy if someone would be able to tell me if I’m doing it wrong or if there’s simply a compatibilty/browser issue; as said when I write the code in my texteditor and open it from a drive the icons work just fine.

greetings f

I’ve tried these:

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

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

– all with their corresponding syntax shown in the descriptions

So I’ve finished my Portfolio but now not only the social media icons do not work, but the google fonts I used dont work either; something seems to get lost when copying my code to codecamp and I dont know what it is :frowning:

This is what I’ve linked:

<!-- Pacifico, Poppins, Comfortaa and SM-Icons Font -->
    <link rel="preconnect" href="https://fonts.googleapis.com"> 
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Comfortaa&family=Pacifico&family=Poppins&family=Shadows+Into+Light&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

and here are some of the icons I pasted in (although they didnt seem to work 100% right at least the logo was visible when opening the index file in my browser):

<a href="#" class="fa fa-facebook smlink"></a>  
            <a href="#" class="fa fa-twitter smlink"></a>  
            <a href="#" class="fa fa-pinterest smlink"></a>  
            <a href="#" class="fa fa-linkedin smlink"></a>  
            <a href="#" class="fa fa-instagram smlink"></a>
2

can you show us some sample code showing what you are referencing and from where?

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.