In my personal website, I use sprites to show the contact icons (ie. skype, email, etc).
Recently I needed to add a new icon in the sprite therefore I have made a new one (sprite) and uploaded it to my FTP folder.
Everything works great on localhost but it does not work in my hosted website.
As you can see, locahost picture has got the LinkedIn icon, which I wanted to add, but on the hosted website it's not there.
CSS code:
.contact-aboutme, .contact-email, .contact-github, .contact-linkedin, .contact-skype, .contact-stackoverflow, .contact-twitter{
background: url(../img/contacts-sprite.png) no-repeat;
}
.contact-aboutme{
background-position: 0 0;
width: 32px;
height: 32px;
}
.contact-email{
background-position: -34px 0;
width: 32px;
height: 32px;
}
.contact-github{
background-position: -68px 0;
width: 32px;
height: 32px;
}
.contact-linkedin{
background-position: -136px 0;
width: 32px;
height: 32px;
}
.contact-skype{
background-position: -170px 0;
width: 32px;
height: 32px;
}
.contact-stackoverflow{
background-position: -102px 0;
width: 32px;
height: 32px;
}
.contact-twitter{
background-position: -204px 0;
width: 32px;
height: 32px;
}
.htaccess:
<IfModule mod_deflate.c>
SetOutputFilter DEFLATE
# Don’t compress
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI \.(?:exe|t?gz|zip|bz2|sit|rar)$ no-gzip dont-vary
#Dealing with proxy servers
<IfModule mod_headers.c>
Header append Vary User-Agent
</IfModule>
</IfModule>
Where's what I tried to do:
- Changing/deleting the file name - the image remained there.
- Downloaded the file from the FTP to my computer just to make sure I didn't fail at uploading it - it was correct.
- Deleted the browser cache - it didn't work.
- Tried refreshing both with F5 and CTRL+F5 - it didn't work.
I have no idea why this is happening.
I tried waiting as well like an hour or two, maybe it was a temporary issue but it didn't work.