Printable Version of Topic

Posted by: Gabarito Aug 4 2019, 01:19 PM

Hi, guys.

Could someone give me some tips on page styles using the fontawesome-webfont features?
I'm stuck here.
Since the pages I save with Firefox can't download these icons, I use the WebScrapbook extension.
But I noticed that after updating Firefox, WebScrapbook can no longer download the icons from fontawesome-webfont.
I tried to inspect these icons and found some codes that resemble Emojis.
One is \f08d, as an example.
I am not seeing how to display these icons on the HTML page.

A concrete case: I downloaded http://forums.ultraedit.com/viewtopic.php?f=8&t=18240.
Icons next to "Reply", "Subscribed", "Pin Topic" and others do not appear in saved HTML.
How to make them appear?
I've been looking at the contents of index.html and font-awesome.min.css. I found the references to the icons, but I don't know what could be wrong.

Where the icon should appear, this appears:


Any idea?

Posted by: pandy Aug 4 2019, 03:49 PM

No idea what that is. Could you explain?




I found neither Reply, Subscribed nor Pin Topic in that page. Guess you need to be logged in.

Anyhow, after some googling I found this. Are these the icons you are talking about? Looks like most can be downloaded from that page.
https://fontawesome.com/icons?d=gallery

Posted by: Gabarito Aug 4 2019, 04:25 PM

Hi, pandy.
Thank you for your attention.

I'm trying to save locally some web pages that use a group of icons.
This is known as FontAwesome, from where you had found its site and had suggested me to download their icons.
Firefox, what I use to save such pages, can't grab those icons.
Thus, I use an extension named WebSrapbook to do that.
It can save all html files along stylesheet files and images also.

All was running fine until I had to updated Firefox.
Now, Firefox still can't save those pages correctly and also WebScrapbook stopped to do what it was able to do.


That page was just an example of one that has such kind of icons.
Try to save it locally and open it again from your harddisk.
You will see that some icons is missing.
That's the problem, the core of my problem.



As I said before, that's not the point.
Download some icons is useless because they would stand without reference from stylesheets files.
And the local page would goes not showing the icons properly.

Posted by: Gabarito Aug 4 2019, 04:40 PM

You are right.
"Reply", "Subscribed" and "Pin Topic" appear just to logged users.
Sorry for that.

But, at that same page, look for icon below kdrymer username, beside the number 3.
Other example is the watch icon besides the date-time "16:24 - Aug 01#1" text.
Both are missing and show just this:

I'm trying to understand whats is going on and to fix it, even having to write .css and .html files.

Posted by: Christian J Aug 4 2019, 04:40 PM

Since the emojis are created with CSS Generated Content, I suppose you need both the site's stylesheet(s) and the Fontawesome files. But apparently you need to to create an account to use the latter on the web (maybe that's why it doesn't work when you download the page): https://fontawesome.com/start however, it seems you can also download the files for offline use here: https://fontawesome.com/how-to-use/on-the-desktop/setup/getting-started (assuming the all file paths are still correct offline).

See also https://www.kirupa.com/html5/emoji.htm

Posted by: Gabarito Aug 4 2019, 04:45 PM

Thank you, Christian.

I'll have a look on pages that you suggested and will come back later to comment those.

Meanwhile, if someone else has more ideas...
I'm ready to hear.

(I cannot understand why WebScrapbook could save everything fine, .css, .html, all fonts... but now, it can't).

Posted by: Christian J Aug 4 2019, 05:05 PM

Did this happen after the Firefox Quantum update, or more recently?

Posted by: Gabarito Aug 4 2019, 05:30 PM

I was using Firefox 66 (Windows 7 64 bits) because some other extensions won't support latest version.
And WebScrapbook could do all the job.
It used to save all fonts, SVG, EOT, WOFF, .css and .html files smoothly, showing all fonts and icons.
No icon was missing.
I was happy.


But last week, I could update Firefox to 68.0.1 (latest) and could see that my toy was broken...


I guess that I already have all fonts and files here, but .css or .html are trying to reference missing file links.
And I don't know HTML neither CSS code enough to fix that.

Below is my saved folder, if you could take a look on that, it would be great!

https://drive.google.com/open?id=1jxpthF_tcNHClUok1DyxUnhb-Hvh8nGA

Posted by: Gabarito Aug 4 2019, 05:32 PM

Here, you have WebScrapbook extension if you want to try too:

https://addons.mozilla.org/pt-BR/firefox/addon/webscrapbook/

Posted by: Gabarito Aug 4 2019, 09:25 PM

I have some news about this topic.

I found out that the problem is not related to WebScrapbook or missing Awesome-Fonts.
It was a big surprise for me.

The problem is Firefox itself!

If I open the same set of files (html, css, jpg, png, eot, svg, woff,...) using other browser, all icons shows up as expected.

Below is a picture of the proper icons when I use Chrome or Opera:


Below is a picture of the missing icons when I use Firefox:



So, the question now is: why this happens? Is it a Firefox bug?

Posted by: pandy Aug 5 2019, 02:23 AM

I was with you that far. So you just meant the icons? Got the impression it was something far more than that.



No, I wont. I don't see those things in the first place. Probably because I'm not logged in.



Are you saying those references are also removed? I understand you want everything to happen automatically, but if it doesn't the only thing I can think of is to mend things yourself, i.e. download the icons separately and edit the URLs to them in the CSS as needed.

Posted by: Christian J Aug 5 2019, 05:29 AM

Do you mean online or offline? Is it only on one website?


If it doesn't work online it sounds like a bug (unless the Encoding has changed by mistake?). But if it's only offline hat it doesn't work, maybe there could be more reasons as well.

Posted by: Gabarito Aug 5 2019, 05:44 AM

Offline.
Try to open index.html from the https://drive.google.com/open?id=1jxpthF_tcNHClUok1DyxUnhb-Hvh8nGA and you'll see that other browsers can show all icons, but Firefox 68 can't.


Well, try it yourself with https://drive.google.com/open?id=1jxpthF_tcNHClUok1DyxUnhb-Hvh8nGA and say what you think.
Remember to open index.html with different browsers.

Posted by: Gabarito Aug 5 2019, 05:48 AM

About to open the files I already sent, note that there is no javascript file that could mean some threat of malicious code.
In other words, it's 100% safe.
It was downloaded by WebScrapbook extension.
Anyone can download the same by using the same method to get the same set of files.

Posted by: Christian J Aug 5 2019, 06:13 AM

That seems to be this one: https://fontawesome.com/icons/quote-left?style=solid (the syntax with a backslash indicates it's used in CSS). Though they call it "unicode", a quick web search only returns pages related to Fontawesome, not the official Unicode reference. So maybe you need the Fontawesome files to view it (and those have been broken in your latest Firefox update).

For comparison, here's the hamburger icon, which works in my Firefox even without Fontawesome:

Posted by: Gabarito Aug 5 2019, 07:31 AM

No, that is https://fontawesome.com/icons/thumbtack?style=solid = f08d.


It seems that latest Firefox 68.0.1 (Quantum), 64 bits on Windows 7, lacks those files.


Hamburger icon display properly here using '&#x 1F354' code (without space), like this:

Posted by: Gabarito Aug 5 2019, 07:38 AM

Is it true?
May someone could confirm that?
How to explain other browsers can display icons properly, but Firefox cannot?

Posted by: Gabarito Aug 5 2019, 08:20 PM

Searching about the problem, I found what may be the explanation for this in the answer to https://support.mozilla.org/en-US/questions/1264603:

I applied the following recommendation in "about:config":
privacy.file_unique_origin from true to false
and the problem has been resolved.

Therefore, it is not a Firefox bug but a security measure that could possibly be removed in future releases because the fonts poses no risk and cannot host malicious code.

It is the information for those who went through the same problem.