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;
}

Want to learn something new? I send out weekly, personalized emails with articles and conference talks. Click here to see an example and subscribe.

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

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