Asynchronous Web Server (Icon & Fonts)

Q&A Forum › Asynchronous Web Server (Icon & Fonts)

ChinGuan Quek asked 2 years ago

Hi,
I noticed that the HTML code segment within the Arduino code includes two lines:
integrity=”sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr”
crossorigin=”anonymous”>
May I understand the purpose of these two line of code?
I “comment” them out and recompile the code and It still work fine.
I would also like to inform that the fontAwesome is now in version 6.4.0. I tried to generate a new icon using the new app version and replace it sample code. Due to the version, the Icons would not show.
I tried exploring the fontAweSome application a little but having some trouble upgrading the code to use the latest release.
Need some advice here.

Thanks

4 Answers

0 Vote Up Vote Down

Sara Santos Staff answered 2 years ago

Hi.
That line of code is needed to use the fontawesome icons.
If they are still displayed after you remove that line, it is probably because the icons are saved on the web browser cache.

How did you try to generate new icons? What lines of code did you use?
Regards.,
Sara

0 Vote Up Vote Down

ChinGuan Quek answered 2 years ago

I restarted my computer to clear the cache memory. Reloaded the Arduino code that has the two lines comment out into my ESP32. I was able to get the webpage working fine.
the two line of code seems unnecessary.

0 Vote Up Vote Down

Bruce Develle answered 5 months ago

I have a similar question regarding Font Awesome icons and the ESPAsyncWebServer library. In the code for the Video_Streaming_Web_Server_Sensor_Readings.ino file from the ESP32-CAM Projects with Arduino IDE book, Module 4, the code has the lines FA Icon Usage to display the FA icons. But nowhere in the HTML code is there a link to the Font Awesome library location. According to MS Copilot the icons may be stored in the browser’s cache, as you stated as well. But what if the icons are not stored in the cache, how are the icons retrieved? The full HTML code is here HTML Code .

0 Vote Up Vote Down

Sara Santos Staff answered 5 months ago

Hi.
Thanks for pointing that out.
If the icons are not in the cache, they will not be loaded.

So, it’s our mistake that we’ve forgotten to include the line to use fontawesome icons.
If you want to use the icons in your webpage, you need to include

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

I hope this is clear. And I’m sorry for our mistake.~
Regards, Sara