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

Icons and images inside the CSS are not showing on HTML. Visual Code

This is my CSS. I have used the correct path. When i load the page on safari, i see an orange square (reference image is an orange logo), on chrome i see nothing.

ul {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: left;
    list-style: none;
    font-weight: 100;
        
}

ul li {
    margin-bottom: 10px;
    position: relative;
}

ul li::before {
    content: ""; 
    background: url(images/icons/heartgoldicon.ico);  
    width: 20px;
    height: 20px;
    display: inline-block;
    margin-right: 10px; 
}

PS: It took me research to learn about the ~~~. The inline code and code block things dont work.

Edit: I just tried to use a link instead and it shows. No idea whats wrong with the images in the icons folder but nothing inside that works. I have images inside ‘images’ and that works fine.

Tags:

2

Answers


  1. 0

    Try changing the background url to-

    url(/images/icons/heartgoldicon.ico);

    Maybe the missing ‘/’ before the ‘images’ is causing the problem. I tried the code in Brackets with and without the ‘/’ and it worked fine both the times. However, on the server, it doesn’t work without ‘/’.

    Login or Signup to reply.
  2. 0

    A few potential issues that may be causing your icon not to show up:

    1. The use of the .ico format
    2. Using a relative path to your icon

    The .ico format may not work on all browsers and you should use a more known format like png or jpg. It is generally used for favicons, not for icons. Some browsers may display them while some may not.

    Your current path to the image is a relative path, so where your css file is located will matter to the search. background: url(images/icons/heartgoldicon.ico) will search that from the current folder that your css file is located. You can use an absolute path by starting with a /, and then it will always look for the file from the root folder. Example use background: url("/images/icons/your-icon.png"),

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search