Help on product landing page

HTML-CSS
1

I need help on making an icon logo appear on my landing page…I followed the guild lines but an icon won’t appear on my page…Please i need help on that, here’s my code below…

<div class="container">
   <section id="features">
     <div class="features">
       <div class="icon"><i class="https://media.istockphoto.com/vectors/creative-abstract-fire-logo-vector-id1146078779?k=20&m=1146078779&s=612x612&w=0&h=Vg1ppYlTL_jJTBmJpQW5KdcA5NOwZ6PFPnWxI3iT-Zs="></i>
2

if you want to use an i element for an icon with fontawesome, you need to import fontawesome and use the correct class names

otherwise you will need to use an img element

3

@ILM Yeah i just got to know that few hours back when i watched a youtube video on how to make an icon appear on webpages…Thank you for the information

4

@ I’m really getting frustrated with this because i used the fontawesome and added the right class name but the fucking flame won’t still appear…I don’t know where i’m getting it wrong but here’s my code below…

<section id="features">
   <div class="feature">
     <div class="icon">
       <i class="fa-solid fa-fire-flame"></i>
             </div>
5

Are you importing font awesome? Please share all your code

6

Yes I imported it from font awesome but I guess because I have to pay for it that’s why it’s not showing

7

I’m trying to add a flame to my webpage but the flame won’t still appear even when i did it right…I’m stucked on this & i need help because i’m really getting frustrated…Here’s my code below…

<div class="container">
         <section id="features">
           <div class="features">
             <div class="icon">
               <i class="fa-thin fa-fire-flame"></i>
8

Hi

That icon’s a “pro” icon - you have to pay for it, I’m afraid.

If you’re looking for something that isn’t “solid”, have you tried Line Awesome ?

As far as I know, all their icons are free.

1 Like
9

@KittyMac
Oh really? Well I use fontawesome…No I haven’t tried line awesome…Please what’s their website so I can get the class name from there…

10

There was a link to the website in my previous post, but here it is again.

11

Okay I got it but if I’m gonna do it will have I have to import kit code I mean tag

12

Do you mean the cdn link?

<link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css">

13

No not the the cdn link but the kit code

14

Better still if I’m gonna use line awesome do I just copy the class name or how do I do it ?

15

I don’t know what you mean by “kit code”.

Line Awesome works the same way as Font Awesome.
If you find an icon you like, copy the html and use it.

16

Okay I’m not on my laptop right now, if not I would have showed you what I mean by kit code…But if I find a icon I like all I gotta do is just copy the code and paste it in my page right ?

17

That’s right.

Remember to add the link for the stylesheet and you should be all set.

18

Sure I’ll try that soon

19

Hey @KittyMac this is what i mean by kit code…You must add it to your html page for the icon to appear…

IMG_6707
IMG_67071920×1440 140 KB

20

Please i need help on this, I’m stucked & here’s my code below…

IMG_6711
IMG_67111242×2377 269 KB 

<header id="header">
  <div id="logo">
    <img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png"
        alt="original trombones logo">
       
<nav id="nav-bar">
  <ul>
    <li><a class="nav-link" href="#Features">Features</a>
     </li>
    <li> <a class="nav-link" href= "#How_it_works">How it works</a></li>
      <li>
         <a class="nav-link" href= "#Pricing">Pricing</a></li>
      </ul>
      </nav>
      </header>