Academicons and HTML not showing correctly - html

This question was already asked before, nevertheless the solution that was suggested didn't solved the problem.
I am trying to include the ResearchGate academicon in my website, nevertheless it is displayed as a square in Google Chrome and as square with numbers inside in Firefox, while loading the website from the server.
If I download all the files to my computer (as a zip and then opening directly the html file) it displays correctly.
The previous question that was asked with the exactly same problem (and overall situation, it actually uses the same template for the website as I do) is here with its discussion is here Font-awesome: An emoticon looks different on my computer than on the actual webpage
I already tried doing the suggested modifications in the .htaccess file without success. Does anyone of you have an idea on how to attack this problem?
Many thanks!
Edit 1:
I include here the mime types reported by my CPanel:
Mime Types in CPanel
Edit 2:
Sorry, I don't have enough reputation to post the pictures, but they are identical to the quoted previous Question (linked: Font-awesone: An emoticon looks...).

Is it even in the correct size (maybe it is very small)? When not: Check font-awesome.com .. it has set some classes with allows you to size your icons. Try this class on your html in the <i> tag: fa-x3
I´ve made the same on this page in the footer.
Don't kill me if I am totally wrong for what you are searching.

Related

Why aren't Jekyll Assets Displaying Correctly?

I'm building a few GitHub Pages using Jekyll, and I'm stuck with a mystery.
A number of asset files existing in a repo, and yet they do not seem to render correctly.
One repro of things can be found in the repository for Irregular. Its gitHub page shows empty space where .gif assets should be.
The GitHub Actions log indicates it has been copied
The asset seems like it is there, but just renders as a transparency.
see: https://irregular.start-automating.com/assets/images/RegexSyntaxHighlighting.gif
Another repo can be found in the repository for EZOut. Its page also shows blank space where there should be images.
The image is displayed correctly when I run the pages locally.
What could be causing this behavior? What can I do to workaround it?
All ideas are welcome.
Thanks
I have forked your repo and my GH pages build just shows up working fine with no changes, see https://cadamini.github.io/Irregular/
I have tested both images on my site (https://cadamini.github.io). It seems like an encoding issue. The raw content of both images looks different, one had normal characters, and the other one displayed � characters.
Your repository actually contains multiple versions of the file in question, but only one is working.
You seem to have (intentionally?) overwritten three of them two months ago. The last working version was this commit.
This got me thinking about what else could mess up the repository, and it seems like the culprit was a GitHub Action that replaced the files. I noticed an issue tracking this, and it appears fixing it has fixed the display issue.
As far as why it showed up as it did, I have some theories:
Because the file was valid and then rewritten as text, some bytes were malformed and out of order.
GIFs, being an older format, were able to guess at a resolution but otherwise fail to decode (hence appearing invisible, though not with the correct bounds).
PNGs, being a newer format, recognized they were corrupted and failed to render.
SVGs, which are really just XML under the covers, rendered fine
This just shows that encoding issues can visually manifest in many different ways with different formats. Very fascinating.

Image not displaying on github pages though displays when running off my local machine [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed last month.
Improve this question
First off, the first question asked on here, so apologies for anything I get wrong.
Secondly, I have checked countless times for answers both on stacked and off. Before explaining the issue, I have tried capitalizing the JPG but it still shows the picture when it's typed in lowercase jpg on my local server when in google-chrome index.html file is running. I have also tried removing the ../ from the src attribute, though it doesn't display images on either github pages or from my local server, it displays the image on my local server when the ../ is used.
Display from running google-chrome index.html from the terminal
Display from github pages
What could be the issue/ solution to displaying the image on GitHub pages? I have given it a few hours to see if it loads in and nothing by the way.
This is the snippet of code of VSCode.
Thanks!
EDIT/UPDATE: SO, the issue was as simple as I was not uploading the images to the GitHub repo. Effectively when I was trying to load an image on my html document, the src was searching for an image file that simply wasn't there (Was only on my local machine at this point, once I committed/pushed the images file to the GitHub repo the issue was resolved.. Right under my nose.
Mental note: Check the remote repo for what files it currently contains to prevent future headaches as this one.
Thanks for the help though!
If you're trying to say that your image doesn't load it's mostly because the code can't locate the file, go to the folder where the image is located, drag the image to open a new chrome or safari page and when that is complete copy the link that pops up into the src in your html.

My website is loading two different page content when it should be the same HTML file

The title says it all roughly...
When you access my site via www.mjgibson.ca it loads a slightly different html file from going to www.mjgibson.ca/index.html
I don't understand how they could be different though because its just one HTML file?
Hopefully one of you have encountered this before because I've been googling this question and can't seem to find someone experiencing this!

HTML distinction .jpg .JPG

I'm building a website hosted on Github Pages that has a gallery that sources a lot of images from a folder. I keep running into two problems:
1) I upload a picture and Github automatically rotates it?
2) HTML wont find the image if I reference it as say "example.jpg" when it is saved as "example.JPG". Less of a question, just looking for insight into why theres a distinction when capitalized.
Your best bet is to probably just manually edit (rotate/align) the photos in your computers builtin photo software.
As for the image extension, if you're running into problems with file extension capitalization then just go with what works. Change all extensions to either one uppercase or lower case would make the most sense to me.
Linux's file system is case sensitive; but in general, a best practice I follow is to point to what the URL is vs. what I want/like it to be.
Reference to another similar answer here
Here are the instructions to edit/add images to GitHub Pages

Prestashop 1.5.4.1 product images displaying question mark

NOTE: Moved the store to droidbox.ca/shop so things are a little different now..
In my prestashop website, all product images are showing only question marks. This happened for the default theme as well as the theme I'm currently testing.
I tried rebuilding thumbnails which didn't help. I've tried disabling all the cache options, and enabling them again. No luck so far. All the solutions I've been able to find seem to apply only to older versions of prestashop. One example suggested adding a chmod line in images.inc.php which made sense to me, but my images file doesn't include the lines they suggested putting it above.
http://kb.siteground.com/uploaded-prestashop-images-are-not-displayed/
My website is http://printbot.ca
When I view what image is supposed to be displayed, one URL is this: http://printbot.ca/27-large_default/1kg-black-pla-filament-175mm.jpg
This is on the black PLA product http://printbot.ca/175mm-pla-filament/8-1kg-black-pla-filament-175mm.html
When I go to that JPG, it shows up as a question mark, not a broken link. I can't find the file in my file system.
Important note though, all the images show up correctly in the back-end. I can see them in the product creation page and view them when I open the product to edit it. The correct path to the image is http://printbot.ca/img/p/2/7/27.jpg
Thanks for any help you can offer!!