Preventing icon flicker when using glyphicons and Bootstrap

I found that using React Bootstrap to render an icon would cause the page to flicker briefly on loading – any text around the icon would render in the wrong place on the page, and then move once the icon loads.

To fix this you can add a piece of CSS to tell the browser how big the icon is, and the problem goes away. Seems like this should be included with the Bootstrap CSS, but if you need it, here it is:

.glyphicon {
   width: 14px;
   height: 14px;
}

Leave a Reply

Your email address will not be published. Required fields are marked *