Github Pages not showing Icons and images of my CSS

Issue

i've read some post here where the main problem when images are not showing on Github pages is because it is case sensitive. ive been dealing with the same problem of images not showing but in this case i dont see the mistake.

.header--button span{
display: inline-block;
width: 13px;
height: 8px;
margin-left: 10px;
background-image: url('/assets/icons/down-arrow.svg');

this is the way i've placed most of the images but still ican find where am i mistaking?

thisis the link to my repo https://github.com/AlejandroCaputo/Batatabit_CryptoProject

this is the link to my github page https://alejandrocaputo.github.io/Batatabit_CryptoProject/index.html

what am i missing ?

Solution

The cause of the problem of icon images not being shown is due to the 'reference path' of the images.

For example, the image named 'down-arrow.svg' is

actually located at

/Batatabit_CryptoProject/assets/icons/down-arrow.svg,

but is being referred as:

 /assets/icons/down-arrow.svg

The problem can be fixed in 2 ways:

1. Refer to the image with its actual full path, I.E., by using /Batatabit_CryptoProject/assets/icons/down-arrow.svg

2. Refer to the image using a relative path, I.E. by removing the leading / from the image reference.

Answered By - Gopinath