The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Save Font Awesome Feature Icons to Offline HTML Pages
Gabarito
post Aug 4 2019, 01:19 PM
Post #1


Newbie
*

Group: Members
Posts: 12
Joined: 4-August 19
Member No.: 26,944



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 this page.
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: Attached Image


Any idea?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 4 2019, 03:49 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



QUOTE(Gabarito @ Aug 4 2019, 08:19 PM) *

Could someone give me some tips on page styles using the fontawesome-webfont features?


No idea what that is. Could you explain?


QUOTE
A concrete case: I downloaded this page.
Icons next to "Reply", "Subscribed", "Pin Topic" and others do not appear in saved HTML.


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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Gabarito
post Aug 4 2019, 04:25 PM
Post #3


Newbie
*

Group: Members
Posts: 12
Joined: 4-August 19
Member No.: 26,944



QUOTE(pandy @ Aug 4 2019, 05:49 PM) *

No idea what that is. Could you explain?

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.

QUOTE

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

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.

QUOTE

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


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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Gabarito
post Aug 4 2019, 04:40 PM
Post #4


Newbie
*

Group: Members
Posts: 12
Joined: 4-August 19
Member No.: 26,944



QUOTE(pandy @ Aug 4 2019, 05:49 PM) *

QUOTE
A concrete case: I downloaded this page.
Icons next to "Reply", "Subscribed", "Pin Topic" and others do not appear in saved HTML.


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

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: Attached Image

I'm trying to understand whats is going on and to fix it, even having to write .css and .html files.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Aug 4 2019, 04:40 PM
Post #5


.
********

Group: WDG Moderators
Posts: 9,628
Joined: 10-August 06
Member No.: 7



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-d...getting-started (assuming the all file paths are still correct offline).

See also https://www.kirupa.com/html5/emoji.htm
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Gabarito
post Aug 4 2019, 04:45 PM
Post #6


Newbie
*

Group: Members
Posts: 12
Joined: 4-August 19
Member No.: 26,944



QUOTE(Christian J @ Aug 4 2019, 06: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-d...getting-started (assuming the all file paths are still correct offline).

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


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).
sad.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Aug 4 2019, 05:05 PM
Post #7


.
********

Group: WDG Moderators
Posts: 9,628
Joined: 10-August 06
Member No.: 7



QUOTE(Gabarito @ Aug 4 2019, 11:45 PM) *

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

Did this happen after the Firefox Quantum update, or more recently?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Gabarito
post Aug 4 2019, 05:30 PM
Post #8


Newbie
*

Group: Members
Posts: 12
Joined: 4-August 19
Member No.: 26,944



QUOTE(Christian J @ Aug 4 2019, 07:05 PM) *

QUOTE(Gabarito @ Aug 4 2019, 11:45 PM) *

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

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

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.
smile.gif

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

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_tc...DyxUnhb-Hvh8nGA

This post has been edited by Gabarito: Aug 4 2019, 05:31 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Gabarito
post Aug 4 2019, 05:32 PM
Post #9


Newbie
*

Group: Members
Posts: 12
Joined: 4-August 19
Member No.: 26,944



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

https://addons.mozilla.org/pt-BR/firefox/addon/webscrapbook/
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Gabarito
post Aug 4 2019, 09:25 PM
Post #10


Newbie
*

Group: Members
Posts: 12
Joined: 4-August 19
Member No.: 26,944



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:
Attached Image

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


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

This post has been edited by Gabarito: Aug 4 2019, 09:28 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 5 2019, 02:23 AM
Post #11


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



QUOTE(Gabarito @ Aug 4 2019, 11:25 PM) *

QUOTE(pandy @ Aug 4 2019, 05:49 PM) *

No idea what that is. Could you explain?

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.


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

QUOTE
QUOTE

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

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.


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

QUOTE
QUOTE

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


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.


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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Aug 5 2019, 05:29 AM
Post #12


.
********

Group: WDG Moderators
Posts: 9,628
Joined: 10-August 06
Member No.: 7



QUOTE(Gabarito @ Aug 5 2019, 04:25 AM) *

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.

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

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

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. unsure.gif

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Gabarito
post Aug 5 2019, 05:44 AM
Post #13


Newbie
*

Group: Members
Posts: 12
Joined: 4-August 19
Member No.: 26,944



QUOTE(Christian J @ Aug 5 2019, 07:29 AM) *

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

Offline.
Try to open index.html from the folder I sent before and you'll see that other browsers can show all icons, but Firefox 68 can't.

QUOTE(Christian J @ Aug 5 2019, 07:29 AM) *

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. unsure.gif

Well, try it yourself with files I already sent and say what you think.
Remember to open index.html with different browsers.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Gabarito
post Aug 5 2019, 05:48 AM
Post #14


Newbie
*

Group: Members
Posts: 12
Joined: 4-August 19
Member No.: 26,944



QUOTE(Gabarito @ Aug 5 2019, 07:44 AM) *

Well, try it yourself with files I already sent and say what you think.
Remember to open index.html with different browsers.

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.

This post has been edited by Gabarito: Aug 5 2019, 05:51 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Aug 5 2019, 06:13 AM
Post #15


.
********

Group: WDG Moderators
Posts: 9,628
Joined: 10-August 06
Member No.: 7



QUOTE(Gabarito @ Aug 4 2019, 08:19 PM) *

I tried to inspect these icons and found some codes that resemble Emojis.
One is \f08d, as an example.

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:

CODE
h1::before  {
  content: "\01F354";
}

<h1>A hamburger icon should appear before this text</h1>



User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Gabarito
post Aug 5 2019, 07:31 AM
Post #16


Newbie
*

Group: Members
Posts: 12
Joined: 4-August 19
Member No.: 26,944



QUOTE(Christian J @ Aug 5 2019, 08: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).

No, that is this one = f08d.

QUOTE(Christian J @ Aug 5 2019, 08:13 AM) *

So maybe you need the Fontawesome files to view it (and those have been broken in your latest Firefox update).

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

QUOTE(Christian J @ Aug 5 2019, 08:13 AM) *

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

Hamburger icon display properly here using '&#x 1F354' code (without space), like this:
CODE
<meta charset="UTF-8">
h1::before  {
  content: "\01F354";
}

<p>'&#x 1F354'</p> (without space)

<h3>A hamburger icon should appear before this text</h1>

Attached Image

This post has been edited by Gabarito: Aug 5 2019, 07:34 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Gabarito
post Aug 5 2019, 07:38 AM
Post #17


Newbie
*

Group: Members
Posts: 12
Joined: 4-August 19
Member No.: 26,944



QUOTE(Gabarito @ Aug 5 2019, 09:31 AM) *

QUOTE(Christian J @ Aug 5 2019, 08:13 AM) *

So maybe you need the Fontawesome files to view it (and those have been broken in your latest Firefox update).

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

Is it true?
May someone could confirm that?
How to explain other browsers can display icons properly, but Firefox cannot?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Gabarito
post Aug 5 2019, 08:20 PM
Post #18


Newbie
*

Group: Members
Posts: 12
Joined: 4-August 19
Member No.: 26,944



Searching about the problem, I found what may be the explanation for this in the answer to this topic:

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.

smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 18th March 2024 - 11:53 PM