font awesome SVG icons doesn't work on safari (iOS)

[hbopuri]

I have following font awesome reference

<link href="css/fontawesome-free-5.12.1-web/css/all.css" rel="stylesheet">	   
<script defer src="css/fontawesome-free-5.12.1-web/js/all.js"></script>

Alternatively I also have premium kit reference

<script src="https://kit.fontawesome.com/7xxxx.js" crossorigin="anonymous"></script>

Both references renders icons on Google Chrome, but fails to work on Safari (iOS)
Console error says

NoModificationAllowedError: The object can not be modified

Here is the code all.js fontawesome library that is having issues

if (node.parentNode && node.outerHTML) {
         node.outerHTML = newOuterHTML + (config.keepOriginalSource && node.tagName.toLowerCase() !== 'svg' ? "<!-- ".concat(node.outerHTML, " -->") : '');
      } else if (node.parentNode) {
        var newNode = document.createElement('span');
        node.parentNode.replaceChild(newNode, node);
        newNode.outerHTML = newOuterHTML;
      }

How can I make this work for safari?

node.outerHTML = newOuterHTML + (config.keepOriginalSource && node.tagName.toLowerCase() !== 'svg' ? "<!-- ".concat(node.outerHTML, " -->") : '');

[tagliala]

Hi!

Thanks for being part of the Font Awesome Community.

<link href="css/fontawesome-free-5.12.1-web/css/all.css" rel="stylesheet">	   
<script defer src="css/fontawesome-free-5.12.1-web/js/all.js"></script>

Please just user for one of this, you don't need both. JS if for the SVG implementation, CSS for the webfonts.

<script src="https://kit.fontawesome.com/7xxxx.js" crossorigin="anonymous"></script>

Feel free to share the id of the kit, so I can check kit configuration.

Also, do not use the kit together with css/js: use the kit OR svg OR css

Safari (iOS)

Which Version?

[hbopuri]

@tagliala thanks for the quick response.

May be I did not explain it well, I am not using both css/js and kit.

I am explaining that font awesome is failing to render icons just with css/js or kit reference (I am not using/referencing both at once).

kit Id: 768a971040.js

Safari version:13.1.1

edit by tagliala: kit configuration

window.FontAwesomeKitConfig = {"asyncLoading":{"enabled":false},"autoA11y":{"enabled":true},"baseUrl":"https://ka-p.fontawesome.com","detectConflictsUntil":null,"iconUploads":{},"license":"pro","method":"js","minify":{"enabled":true},"token":"768a971040","uploadsUrl":"https://kit-uploads.fontawesome.com","v4FontFaceShim":{"enabled":true},"v4shim":{"enabled":true},"version":"5.15.1"};

[hbopuri]

How soon I can expect feedback on this? This is a blocker for us to Go-Live.

[tagliala]

Apologies for the late reply.

I've configured a kit with the same options as yours and tested on Safari iOS (14.2), but I can't reproduce.

URL: https://tagliala.github.io/fa17468.html

Please let me know if it reproducible with your specific Safari version

[hbopuri]

@tagliala I have invited to my code on GitHub, which is a lighter version where you can reproduce the problem. there are two files over there route.html and airport.html (you can run either of those) and see errors on console window. That can explain it better.

[tagliala]

@hbopuri I took a fast look, but I cannot see usage of font awesome (<i class="fas fa-home"></i>) in the html files you mentioned.

Can you please create a publicly accessible, reproducible test case without any other third-party library?

[hbopuri]

@tagliala if you may check main.weathericons.js file, line number 73 to 88 I dynamically get different different font-awesome icon class and then render it on SVG chart. This works all fine on all other browsers. Giving it out publicly will be a challenge.

[tagliala]

Ok, got it.

Doesn't look like a general use case, this could require time, and having a reduced test case is highly appreciated.

I think that the best thing you can do is to send and email to hello@fontawesome.com to get Pro support. Please also add a reference to this issue in the email. Let me know if you don't get answer in the next business day

Meanwhile, if you manage to create a publicly accessible, reduced test case without third party libraries please share it here

[hbopuri]

Hi @tagliala this is the response I got from them, I asked them to elaborate on this and haven't got any update yet. Do you have any clue on this? How to use source SVG?

Since you are embedding SVG within another SVG document, I would recommend you look at using our source SVG files directly instead of trying to replace tags with tags.

[hbopuri]

@tagliala I was able to make some progress.

earlier I was setting my icons as below, which was working fine in all browsers in windows and Chrome on IOS. but not working on SAFARI on IOS

 .append("i")
            .attr("class", ({ property }) => {
                const styleClass = getIconClass({ property})
                return styleClass
            })

I changed it to

.append("text")
                .attr("x", 0)
                .attr("y", 25)
                .attr("font-family", "FontAwesome")
                .attr("font-size", "32px")
                .attr("style", function (d) {
                    return !!d.knowColor ? 'fill:white' : 'fill:#' + d.rewuiredColor
                })
            .text(function (d) {               
                var weatherClass = getFontAwesomeClass(properties); // this returns something like  fas fa-camera-retro
                return getWeatherIconCodeByClass(weatherClass) ; // this returns \uf083
                })

Add in my HTML I added css reference of
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
Which works to render some icons but fails to other icons like \uf185 \uf186 \uf763 \uf7ad

I assumes probably the reference is older I changed it to latest version, which doesn't load any icons (loads all icons as boxes)
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/fontawesome.min.css" integrity="sha512-kJ30H6g4NGhWopgdseRb8wTsyllFUYIx3hiUwmGAkgA9B/JbzUBDQVr2VVlWGde6sdBVOG7oU8AL35ORDuMm8g==" crossorigin="anonymous" />

How do I proceed from here?

[robmadole]

@hbopuri thanks for the details. I've got an answer for you and I'll reply to your email you sent to hello@fontawesome.com.

Since your issue is unique to your use case I'm going to close this ticket here in GitHub.

[tagliala]

Thanks everyone for the heads-up,