Having problems displaying FA icons


#1

Hi there everyone!

I need to work on a site locally so I moved the css and js over and everything is working except for the fontawesome icons. They are acting like the encoding is incorrect but I copied the HTML directly from the site where it’s working.

I can’t figure out what’s going on and would greatly appreciate some pointers on the issue.

Here’s the page: https://s-esx.com/start.html

And for better explanation of my issue.

Original site:

Duped site:


#2

Hi there schwim,

where is the fonts folder on the site?

coothead


#3

Hi there coothead and thanks very much for the help!

It’s my understanding that just including the css file and using the icon’s name in the html is sufficient. I’m basing that off of this: https://www.w3schools.com/icons/fontawesome_icons_intro.asp


#4

But your html head should link to their css, not as downloaded into your own place.

Their css is referencing the fonts folder at their site! :wink:

Edit)
The site allows anybody to browse the site directories. You should really edit the .htaccess file to forbid directory browsing, and/or to be safe put an empty index.php file in each directory on the site!


#5

Hi there schwim,

according to this file…

https://s-esx.com/css/font-awesome.min.css

…the fontawesome webfonts should be found here…

https://s-esx.com/fonts/

…but as you can see, that folder does not exist. :unhappy:

coothead


#6

Thank you guys so much for your help! I’ll be sure to place placeholder files to protect against browsing. This is a project I’ve just begun so I’ve not made it that far.

I saw the URL’s pointing to a parent directory but the very same css file from the W3 site shows the icons properly when using the same css file. Can you tell me why those icons show without a fonts folder while the icons don’t on the other page?

http://s-esx.com/test.html


#7

Hi there schwim,

w3schools, which is not a site that I would
personally advise that you use, does have
the fontawesome fonts in a fonts folder…

Here is a link to one of them…

https://www.w3schools.com/lib/fonts/fontawesome.woff?14663396

…for you to test. :winky:

Obviously, you will need to install them
properly on your new site. :biggrin:

coothead


#8

As Erik pointed out you should be using their CSS on their server which
points to directories on their server.


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

You can’t download that min.css to your own site unless you also download all the font-files as well.

Indeed it is likely that the fonts will be served much quicker from their hi-speed servers rather than your own and also the fact that a lot of people probably have that file cached anyway.


#9

Thank you guys so much for your help. I eventually found the solution to be as Paul instructed. I needed to use the right remote stylesheet. That corrected the issue and caused the icons to show.

Thank you all again for your help!

TMYK!