Fix #9653 embedded icons are correctly loaded

[MV88]

Description

It seems that simply adding the css to the html file fixed the issue

Please check if the PR fulfills these requirements

• The commit message follows our guidelines: https://github.com/geosolutions-it/MapStore2/blob/master/CONTRIBUTING.md
• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)

What kind of change does this PR introduce? (check one with "x", remove the others)

• Bugfix
• Feature
• Code style update (formatting, local variables)
• Refactoring (no functional changes, no api changes)
• Build related changes
• CI related changes
• Other... Please describe:

Issue

What is the current behavior?

Fix #9653

What is the new behavior?

Breaking change

Does this PR introduce a breaking change? (check one with "x", remove the other)

• Yes, and I documented them in migration notes
• No

Other useful information

[allyoucanmap]

Instead to update all project with the font-awesome links in all template I would like to propose a different approach:

• remove all the from all the html files
• create a loadFontAwesome promise that check if the font-awesome css is in the page if not add it an wait the load or error
• place the loadFontAwesome just before the rendering of markers in the drawIcons promise of StyleParserUtils.js

Promise to load the link stylesheet:

const loadFontAwesome = () => {
    return new Promise((resolve) => {
        const fontAwesomeHref = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css';
        if (!document.querySelector(`link[href='${fontAwesomeHref}']`)) {
            const fontAwesome = document.createElement('link');
            fontAwesome.setAttribute('rel', 'stylesheet');
            fontAwesome.setAttribute('href', fontAwesomeHref);
            document.head.appendChild(fontAwesome);
            fontAwesome.onload = () => {
                resolve();
            };
            fontAwesome.onerror = () => {
                resolve();
            };
        } else {
            resolve();
        }
    });
};

the we could use it inside drawIcons

export const drawIcons = (geoStylerStyle, options) => {
   ...
   return loadFontAwesome().then(() => new Promise((resolve) => {
   ...

I did a quick test and it seems to work but I would better to double check if we decide to give it a try. The advantage of this approach are:

• font awesome will be loaded only when we are using a vector layer
• no need to add the link to existing custom project in the html files

[MV88]

@allyoucanmap please review it again

[allyoucanmap]

@ElenaGallo please test this fix on DEV, thanks

[ElenaGallo]

@MV88 I noticed that:

• the first time a point is added the icon is not visible

1.mp4

• now, in the embedded map (2D and 3D), the marker is too large

2.mp4

• on share map via a direct link (2D and 3D), the icon is not visible

3.mp4

• on permalink (2D and 3D), the icon is not visible

4.mp4

[MV88]

@ElenaGallo please test it in DEV