Bootstrap Glyphicons not showing in firefox but it is showing for Chrome

Question

        <div class="col-md-2">
            <ul class="list-unstyled">
                <li> <a class="link" href="#"><span class="glyphicon glyphicon-send" aria-hidden="true"></span>GSD Cafe</span></a></li>
                <li> <a class="link" href="#"><span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span>Jobs Well Done</span></a></li>
                <li> <a class="link" href="#"><span class="glyphicon glyphicon-picture" aria-hidden="true"></span>Click Club</span></a></li>
                <li> <a class="link" href="#"><span class="glyphicon glyphicon-align-justify" aria-hidden="true"></span>PAge 3</span></a></li>
                <li> <a class="link" href="#"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>i2i</span></a></li>
                <li> <a class="link" href="#"><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>Announcement</span></a></li>
            </ul>
        </div>

I have used the above code for my Sidebar and it is working for Google Chrome and even mobile phones but not for firefox.

FYI: I have a index.html file which is at root level and glyphicons is working for that html but this html (for which I have provided code) is in different folder.

Answer 1

Open 1. about:config in firefox 2. Find security.fileuri.strict_origin_policy property and change its property from ‘true’ to ‘false.’

Appearance varies from Browser to browser