{"id":3606,"date":"2016-04-08T12:36:32","date_gmt":"2016-04-08T12:36:32","guid":{"rendered":"http:\/\/www.garysieling.com\/blog\/?p=3606"},"modified":"2016-04-08T12:36:32","modified_gmt":"2016-04-08T12:36:32","slug":"preventing-icon-flicker-using-glyphicons","status":"publish","type":"post","link":"https:\/\/www.garysieling.com\/blog\/preventing-icon-flicker-using-glyphicons\/","title":{"rendered":"Preventing icon flicker when using glyphicons and Bootstrap"},"content":{"rendered":"<p>I found that using React Bootstrap to render an icon would cause the page to flicker briefly on loading &#8211; any text around the icon would render in the wrong place on the page, and then move once the icon loads.<\/p>\n<p>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:<\/p>\n<pre lang=\"css\">\n.glyphicon {\n   width: 14px;\n   height: 14px;\n}\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>I found that using React Bootstrap to render an icon would cause the page to flicker briefly on loading &#8211; 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 &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/www.garysieling.com\/blog\/preventing-icon-flicker-using-glyphicons\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Preventing icon flicker when using glyphicons and Bootstrap&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"footnotes":""},"categories":[4],"tags":[129],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 4.9.9 - aioseo.com -->\n\t<meta name=\"description\" content=\"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\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"gary\"\/>\n\t<link rel=\"canonical\" href=\"https:\/\/www.garysieling.com\/blog\/preventing-icon-flicker-using-glyphicons\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 4.9.9\" \/>\n\t\t<meta property=\"og:locale\" content=\"en_US\" \/>\n\t\t<meta property=\"og:site_name\" content=\"Gary Sieling - Software Engineer\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"Preventing icon flicker when using glyphicons and Bootstrap - Gary Sieling\" \/>\n\t\t<meta property=\"og:description\" content=\"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\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/www.garysieling.com\/blog\/preventing-icon-flicker-using-glyphicons\/\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2016-04-08T12:36:32+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2016-04-08T12:36:32+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n\t\t<meta name=\"twitter:title\" content=\"Preventing icon flicker when using glyphicons and Bootstrap - Gary Sieling\" \/>\n\t\t<meta name=\"twitter:description\" content=\"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\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"BlogPosting\",\"@id\":\"https:\\\/\\\/www.garysieling.com\\\/blog\\\/preventing-icon-flicker-using-glyphicons\\\/#blogposting\",\"name\":\"Preventing icon flicker when using glyphicons and Bootstrap - Gary Sieling\",\"headline\":\"Preventing icon flicker when using glyphicons and Bootstrap\",\"author\":{\"@id\":\"https:\\\/\\\/www.garysieling.com\\\/blog\\\/author\\\/gary\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/www.garysieling.com\\\/blog\\\/#organization\"},\"datePublished\":\"2016-04-08T12:36:32+00:00\",\"dateModified\":\"2016-04-08T12:36:32+00:00\",\"inLanguage\":\"en-US\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.garysieling.com\\\/blog\\\/preventing-icon-flicker-using-glyphicons\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.garysieling.com\\\/blog\\\/preventing-icon-flicker-using-glyphicons\\\/#webpage\"},\"articleSection\":\"Code Examples, css\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.garysieling.com\\\/blog\\\/preventing-icon-flicker-using-glyphicons\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.garysieling.com\\\/blog#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.garysieling.com\\\/blog\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.garysieling.com\\\/blog\\\/category\\\/code-examples\\\/#listItem\",\"name\":\"Code Examples\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.garysieling.com\\\/blog\\\/category\\\/code-examples\\\/#listItem\",\"position\":2,\"name\":\"Code Examples\",\"item\":\"https:\\\/\\\/www.garysieling.com\\\/blog\\\/category\\\/code-examples\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.garysieling.com\\\/blog\\\/preventing-icon-flicker-using-glyphicons\\\/#listItem\",\"name\":\"Preventing icon flicker when using glyphicons and Bootstrap\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.garysieling.com\\\/blog#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.garysieling.com\\\/blog\\\/preventing-icon-flicker-using-glyphicons\\\/#listItem\",\"position\":3,\"name\":\"Preventing icon flicker when using glyphicons and Bootstrap\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.garysieling.com\\\/blog\\\/category\\\/code-examples\\\/#listItem\",\"name\":\"Code Examples\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.garysieling.com\\\/blog\\\/#organization\",\"name\":\"Gary Sieling\",\"description\":\"Software Engineer\",\"url\":\"https:\\\/\\\/www.garysieling.com\\\/blog\\\/\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.garysieling.com\\\/blog\\\/author\\\/gary\\\/#author\",\"url\":\"https:\\\/\\\/www.garysieling.com\\\/blog\\\/author\\\/gary\\\/\",\"name\":\"gary\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/www.garysieling.com\\\/blog\\\/preventing-icon-flicker-using-glyphicons\\\/#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/0be925276d848ffe98a6a9dc8cf33e67?s=96&d=identicon&r=g\",\"width\":96,\"height\":96,\"caption\":\"gary\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.garysieling.com\\\/blog\\\/preventing-icon-flicker-using-glyphicons\\\/#webpage\",\"url\":\"https:\\\/\\\/www.garysieling.com\\\/blog\\\/preventing-icon-flicker-using-glyphicons\\\/\",\"name\":\"Preventing icon flicker when using glyphicons and Bootstrap - Gary Sieling\",\"description\":\"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\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.garysieling.com\\\/blog\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.garysieling.com\\\/blog\\\/preventing-icon-flicker-using-glyphicons\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/www.garysieling.com\\\/blog\\\/author\\\/gary\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/www.garysieling.com\\\/blog\\\/author\\\/gary\\\/#author\"},\"datePublished\":\"2016-04-08T12:36:32+00:00\",\"dateModified\":\"2016-04-08T12:36:32+00:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.garysieling.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.garysieling.com\\\/blog\\\/\",\"name\":\"Gary Sieling\",\"description\":\"Software Engineer\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.garysieling.com\\\/blog\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"Preventing icon flicker when using glyphicons and Bootstrap - Gary Sieling","description":"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","canonical_url":"https:\/\/www.garysieling.com\/blog\/preventing-icon-flicker-using-glyphicons\/","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"BlogPosting","@id":"https:\/\/www.garysieling.com\/blog\/preventing-icon-flicker-using-glyphicons\/#blogposting","name":"Preventing icon flicker when using glyphicons and Bootstrap - Gary Sieling","headline":"Preventing icon flicker when using glyphicons and Bootstrap","author":{"@id":"https:\/\/www.garysieling.com\/blog\/author\/gary\/#author"},"publisher":{"@id":"https:\/\/www.garysieling.com\/blog\/#organization"},"datePublished":"2016-04-08T12:36:32+00:00","dateModified":"2016-04-08T12:36:32+00:00","inLanguage":"en-US","mainEntityOfPage":{"@id":"https:\/\/www.garysieling.com\/blog\/preventing-icon-flicker-using-glyphicons\/#webpage"},"isPartOf":{"@id":"https:\/\/www.garysieling.com\/blog\/preventing-icon-flicker-using-glyphicons\/#webpage"},"articleSection":"Code Examples, css"},{"@type":"BreadcrumbList","@id":"https:\/\/www.garysieling.com\/blog\/preventing-icon-flicker-using-glyphicons\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/www.garysieling.com\/blog#listItem","position":1,"name":"Home","item":"https:\/\/www.garysieling.com\/blog","nextItem":{"@type":"ListItem","@id":"https:\/\/www.garysieling.com\/blog\/category\/code-examples\/#listItem","name":"Code Examples"}},{"@type":"ListItem","@id":"https:\/\/www.garysieling.com\/blog\/category\/code-examples\/#listItem","position":2,"name":"Code Examples","item":"https:\/\/www.garysieling.com\/blog\/category\/code-examples\/","nextItem":{"@type":"ListItem","@id":"https:\/\/www.garysieling.com\/blog\/preventing-icon-flicker-using-glyphicons\/#listItem","name":"Preventing icon flicker when using glyphicons and Bootstrap"},"previousItem":{"@type":"ListItem","@id":"https:\/\/www.garysieling.com\/blog#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/www.garysieling.com\/blog\/preventing-icon-flicker-using-glyphicons\/#listItem","position":3,"name":"Preventing icon flicker when using glyphicons and Bootstrap","previousItem":{"@type":"ListItem","@id":"https:\/\/www.garysieling.com\/blog\/category\/code-examples\/#listItem","name":"Code Examples"}}]},{"@type":"Organization","@id":"https:\/\/www.garysieling.com\/blog\/#organization","name":"Gary Sieling","description":"Software Engineer","url":"https:\/\/www.garysieling.com\/blog\/"},{"@type":"Person","@id":"https:\/\/www.garysieling.com\/blog\/author\/gary\/#author","url":"https:\/\/www.garysieling.com\/blog\/author\/gary\/","name":"gary","image":{"@type":"ImageObject","@id":"https:\/\/www.garysieling.com\/blog\/preventing-icon-flicker-using-glyphicons\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/0be925276d848ffe98a6a9dc8cf33e67?s=96&d=identicon&r=g","width":96,"height":96,"caption":"gary"}},{"@type":"WebPage","@id":"https:\/\/www.garysieling.com\/blog\/preventing-icon-flicker-using-glyphicons\/#webpage","url":"https:\/\/www.garysieling.com\/blog\/preventing-icon-flicker-using-glyphicons\/","name":"Preventing icon flicker when using glyphicons and Bootstrap - Gary Sieling","description":"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","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/www.garysieling.com\/blog\/#website"},"breadcrumb":{"@id":"https:\/\/www.garysieling.com\/blog\/preventing-icon-flicker-using-glyphicons\/#breadcrumblist"},"author":{"@id":"https:\/\/www.garysieling.com\/blog\/author\/gary\/#author"},"creator":{"@id":"https:\/\/www.garysieling.com\/blog\/author\/gary\/#author"},"datePublished":"2016-04-08T12:36:32+00:00","dateModified":"2016-04-08T12:36:32+00:00"},{"@type":"WebSite","@id":"https:\/\/www.garysieling.com\/blog\/#website","url":"https:\/\/www.garysieling.com\/blog\/","name":"Gary Sieling","description":"Software Engineer","inLanguage":"en-US","publisher":{"@id":"https:\/\/www.garysieling.com\/blog\/#organization"}}]},"og:locale":"en_US","og:site_name":"Gary Sieling - Software Engineer","og:type":"article","og:title":"Preventing icon flicker when using glyphicons and Bootstrap - Gary Sieling","og:description":"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","og:url":"https:\/\/www.garysieling.com\/blog\/preventing-icon-flicker-using-glyphicons\/","article:published_time":"2016-04-08T12:36:32+00:00","article:modified_time":"2016-04-08T12:36:32+00:00","twitter:card":"summary_large_image","twitter:title":"Preventing icon flicker when using glyphicons and Bootstrap - Gary Sieling","twitter:description":"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"},"aioseo_meta_data":{"post_id":"3606","title":null,"description":null,"keywords":null,"keyphrases":null,"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":null,"og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"","isEnabled":true},"graphs":[]},"schema_type":"default","schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"local_seo":null,"limit_modified_date":false,"created":"2023-02-04 16:47:51","updated":"2026-07-06 01:44:40","ai":null,"breadcrumb_settings":null,"seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.garysieling.com\/blog\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.garysieling.com\/blog\/category\/code-examples\/\" title=\"Code Examples\">Code Examples<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tPreventing icon flicker when using glyphicons and Bootstrap\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/www.garysieling.com\/blog"},{"label":"Code Examples","link":"https:\/\/www.garysieling.com\/blog\/category\/code-examples\/"},{"label":"Preventing icon flicker when using glyphicons and Bootstrap","link":"https:\/\/www.garysieling.com\/blog\/preventing-icon-flicker-using-glyphicons\/"}],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/posts\/3606"}],"collection":[{"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/comments?post=3606"}],"version-history":[{"count":0,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/posts\/3606\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/media?parent=3606"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/categories?post=3606"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/tags?post=3606"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}