Question 260619 in Html Question posted in
Some basic documentation can be found here.

The Icons in My HTML aren't working I dont know why

so I took some icons from font awsome but I cannot make it to work for some reason the icon isnt apearing, I am now going to show the code,
Note: This is a clone of pinterest for educational porpuses

CSS:

        nav{
            display: flex;
            justify-content: space-evenly;
        }        
        .circle{
            height: 50px;
            width: 50px;
            
            border-radius: 50px;

            overflow: hidden;
            
            display:flex;
            justify-content: center;
            align-items: center;
            margin: 5px;

            transition: 300ms ease-out;
        }
        .circle:hover{
            transform: scale(1.05);
            box-shadow: 0px 0px 100px;
        }
        img, i{
            position:relative;
            width:165px;
        }

HTML:

            <div id="logo" class="circle">
            <img src="./Logo.png" alt="logo">
            </div>
            </div>
            
            <div id="bell" class="circle">
                <a href="#"><i class="fa-solid fa-bell"></i></a>
            </div>
            <div id="notifications" class="circle">
                <a href="#"><i class="fa-solid fa-message"></i></a>
            </div>
            <div id="account" class="circle">
                <a href="#"><i class="fa-solid fa-bell"></i></a>

I tried to put it inside a link without a link, no color, diferent color and I tink that’s it

Tags:

2

Answers


  1. 0

    You are missing the first ‘fa’ in the class:

     <div id="bell" class="circle">
    <a href="#"><i class="fa fa-solid fa-bell"></i></a>
 </div>
 <div id="notifications" class="circle">
    <a href="#"><i class="fa fa-solid fa-message"></i></a>
 </div>
 <div id="account" class="circle">
    <a href="#"><i class="fa fa-solid fa-bell"></i></a>
 </div>

    Also, the css is preventing display of the icon:

     img, i{
            position:relative;
            width:165px;
        }

    width of 165px is causing a problem. Setting it to 16px, for example seems to work.

    Login or Signup to reply.
  2. 0

    Basicallt you first assigned width of i tag to 165 then in circle made it 50vw which made it invisible if you want to correct it make the width less than 50
    {also to make a fontawesome icon bigger use font size property}
    HTML:

        <div id="logo" class="circle">
    <img src="./Logo.png" alt="logo">
    </div>

    
    <div id="bell" class="circle">
        <a href="#"><i class="fa-solid fa-bell"></i></a>
    </div>
    <div id="notifications" class="circle">
        <a href="#"><i class="fa-solid fa-message"></i></a>
    </div>
    <div id="account" class="circle">
        <a href="#"><i class="fa-solid fa-bell"></i></a>
        </div>

    Css:

            nav{
    display: flex;
    justify-content: space-evenly;
    }        
    .circle{
    height: 50px;
    width: 50px;

    border-radius: 50px;

    overflow: hidden;

    display:flex;
    justify-content: center;
    align-items: center;
    margin: 5px;

    transition: 300ms ease-out;
    }
    .circle:hover{
    transform: scale(1.05);
    box-shadow: 0px 0px 100px;
    }
    img, i{
    position:relative;
    font-size:30px;
    }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search