Intermittent CSS icons when reloading page

Question

I am having problems loading icons, but it is rare and difficult to reproduce the problem, as it occurs from time to time in the update with F5. Only occurs in bootstrap css icons or any css font like Ionicons.

The css are in file.

Here are some examples of how you are displaying icons when the problem occurs.

Example of the css file "ionicons.css"

.ion-edit:before { content: "\f2bf"; }

Use of class in html

<td>
        <a class="button_table" data-toggle="modal" data-target="#modalDiv" onclick="load()">
            <span class="ion-edit"></span>
        </a>
    </td>

Inspecting here the canvas css loaded this way:

.ion-edit:before {  content: "";}

I appreciate anyone who can help.

EDIT: The css files are configured in bundleconfig.json of Asp . NET Core to perform the minifier and are inserted in only one layout cshtml.

Answer 1

I solved it here. I changed two things.

The first was that one of the css files was not explicit about the type of charset to be used and then . net assigns a default charset from windows. I made it explicit to use UTF-8.

@charset "UTF-8";

And second is that the css files of the icons were all configured for the same Minifier file in bundleconfig.json along with several other css, only after isolating the files in the configuration to be unique in minifier the problem stopped occurring.