{"id":42968,"date":"2020-02-27T20:30:57","date_gmt":"2020-02-27T15:00:57","guid":{"rendered":"https:\/\/www.quickonlinetips.com\/archives\/?p=42968"},"modified":"2026-10-08T18:54:20","modified_gmt":"2026-10-08T13:24:20","slug":"bootstrap-font-awesome-in-wordpress-visual-post-editor","status":"publish","type":"post","link":"https:\/\/www.quickonlinetips.com\/archives\/2020\/02\/bootstrap-font-awesome-in-wordpress-visual-post-editor\/","title":{"rendered":"How to Load Bootstrap CSS and Font Awesome Icons in the WordPress Editor"},"content":{"rendered":"<p>Do you use Bootstrap classes or Font Awesome icons in your WordPress posts, but they look plain in the editor? By default, the WordPress post editor doesn&#8217;t load your theme&#8217;s frameworks, so buttons, alerts and icons show up as plain text until you preview the post. You can fix that by importing Bootstrap CSS and Font Awesome into the WordPress editor, so what you see while writing matches the live site. Here&#8217;s how, for both the Classic Editor and the block editor.<\/p>\n<p><strong>Quick answer:<\/strong> Add an editor stylesheet to your theme with <code>add_editor_style()<\/code> in <code>functions.php<\/code>. In that stylesheet, import Bootstrap and Font Awesome, for example <code>@import url(\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.3\/dist\/css\/bootstrap.min.css\");<\/code>, or pass the CDN URLs straight to <code>add_editor_style()<\/code>. Clear your browser and site cache, then reload the editor.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_89 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6ae7fb0d94dd8\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"ez-toc-cssicon\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #1a202c;color:#1a202c\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #1a202c;color:#1a202c\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6ae7fb0d94dd8\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2020\/02\/bootstrap-font-awesome-in-wordpress-visual-post-editor\/#The_problem_the_editor_doesnt_show_Bootstrap_or_icons\" >The problem: the editor doesn&#8217;t show Bootstrap or icons<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2020\/02\/bootstrap-font-awesome-in-wordpress-visual-post-editor\/#Step_1_Add_an_editor_stylesheet\" >Step 1: Add an editor stylesheet<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2020\/02\/bootstrap-font-awesome-in-wordpress-visual-post-editor\/#Step_2_Import_Bootstrap_CSS_and_Font_Awesome\" >Step 2: Import Bootstrap CSS and Font Awesome<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2020\/02\/bootstrap-font-awesome-in-wordpress-visual-post-editor\/#Alternative_pass_the_URLs_to_add_editor_style\" >Alternative: pass the URLs to add_editor_style()<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2020\/02\/bootstrap-font-awesome-in-wordpress-visual-post-editor\/#Step_3_Clear_your_cache_and_reload\" >Step 3: Clear your cache and reload<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2020\/02\/bootstrap-font-awesome-in-wordpress-visual-post-editor\/#Block_editor_Gutenberg_notes\" >Block editor (Gutenberg) notes<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2020\/02\/bootstrap-font-awesome-in-wordpress-visual-post-editor\/#Do_you_still_need_Bootstrap\" >Do you still need Bootstrap?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2020\/02\/bootstrap-font-awesome-in-wordpress-visual-post-editor\/#Frequently_asked_questions\" >Frequently asked questions<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2020\/02\/bootstrap-font-awesome-in-wordpress-visual-post-editor\/#Will_this_change_how_my_posts_look_on_the_live_site\" >Will this change how my posts look on the live site?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2020\/02\/bootstrap-font-awesome-in-wordpress-visual-post-editor\/#Why_dont_my_changes_show_in_the_editor\" >Why don&#8217;t my changes show in the editor?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2020\/02\/bootstrap-font-awesome-in-wordpress-visual-post-editor\/#Can_I_use_this_with_a_child_theme\" >Can I use this with a child theme?<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"The_problem_the_editor_doesnt_show_Bootstrap_or_icons\"><\/span>The problem: the editor doesn&#8217;t show Bootstrap or icons<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><a href=\"https:\/\/www.quickonlinetips.com\/archives\/2013\/07\/twitter-bootstrap\/\">Bootstrap<\/a> is a popular mobile-first CSS framework, and <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2013\/07\/add-icon-font-awesome\/\">Font Awesome<\/a> is the most widely used icon font. If your theme uses them, you&#8217;ll notice that the editor doesn&#8217;t look like your live site. For example, here&#8217;s a simple Bootstrap button with a Font Awesome thumbs-up icon:<\/p>\n<pre><code>&lt;span class=\"btn btn-lg btn-success\"&gt;\r\n&lt;i class=\"fa-solid fa-thumbs-up\"&gt;&lt;\/i&gt; LIKE\r\n&lt;\/span&gt;<\/code><\/pre>\n<p>This is how that code looks in the WordPress visual editor without the styles:<\/p>\n<p><img decoding=\"async\" class=\"border alignnone wp-image-42974 size-full\" src=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/nostyle-wordpress-editor.png\" alt=\"Bootstrap button without styles in WordPress editor\" width=\"333\" height=\"187\" srcset=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/nostyle-wordpress-editor.png 333w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/nostyle-wordpress-editor-150x84.png 150w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/nostyle-wordpress-editor-300x168.png 300w\" sizes=\"(max-width: 333px) 100vw, 333px\" \/><\/p>\n<p>And this is how it looks once Bootstrap and Font Awesome are loaded in the editor:<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-42975\" src=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/bootstrap-wordpress-editor.png\" alt=\"Bootstrap CSS and Font Awesome icons in WordPress editor\" width=\"326\" height=\"207\" srcset=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/bootstrap-wordpress-editor.png 326w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/bootstrap-wordpress-editor-150x95.png 150w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/bootstrap-wordpress-editor-300x190.png 300w\" sizes=\"(max-width: 326px) 100vw, 326px\" \/><\/p>\n<p>When you can see the real styling, it&#8217;s much easier to format posts without switching back and forth to the preview.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Step_1_Add_an_editor_stylesheet\"><\/span>Step 1: Add an editor stylesheet<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>First, set up a custom stylesheet for the editor. I explained this step by step in <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2020\/02\/add-custom-css-wordpress-post-editor\/\">how to add custom CSS to the WordPress editor<\/a>. In short, add this to your (child) theme&#8217;s <code>functions.php<\/code>:<\/p>\n<pre><code>function qot_editor_styles() {\r\n    add_theme_support( 'editor-styles' ); \/\/ needed for the block editor\r\n    add_editor_style( 'editor-style.css' );\r\n}\r\nadd_action( 'after_setup_theme', 'qot_editor_styles' );<\/code><\/pre>\n<p>Then create an <code>editor-style.css<\/code> file in the same theme folder.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Step_2_Import_Bootstrap_CSS_and_Font_Awesome\"><\/span>Step 2: Import Bootstrap CSS and Font Awesome<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>At the top of <code>editor-style.css<\/code>, import the framework stylesheets. If they&#8217;re hosted in your theme:<\/p>\n<pre><code>@import url(\"https:\/\/yoursite.com\/wp-content\/themes\/yourtheme\/css\/bootstrap.min.css\");\r\n@import url(\"https:\/\/yoursite.com\/wp-content\/themes\/yourtheme\/fontawesome\/css\/all.min.css\");<\/code><\/pre>\n<p>Or load them from a free public CDN:<\/p>\n<pre><code>@import url(\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.3\/dist\/css\/bootstrap.min.css\");\r\n@import url(\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.2\/css\/all.min.css\");<\/code><\/pre>\n<p>Use the same versions your live site uses, so the editor matches exactly. The old StackPath BootstrapCDN links used in many older tutorials are no longer the recommended source; Bootstrap&#8217;s own docs now point to <a href=\"https:\/\/www.jsdelivr.com\/\" target=\"_blank\" rel=\"noopener\">jsDelivr<\/a>.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Alternative_pass_the_URLs_to_add_editor_style\"><\/span>Alternative: pass the URLs to add_editor_style()<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><code>add_editor_style()<\/code> also accepts full URLs, so you can skip the @import lines:<\/p>\n<pre><code>add_editor_style( array(\r\n    'https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.3\/dist\/css\/bootstrap.min.css',\r\n    'https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.2\/css\/all.min.css',\r\n    'editor-style.css',\r\n) );<\/code><\/pre>\n<h2><span class=\"ez-toc-section\" id=\"Step_3_Clear_your_cache_and_reload\"><\/span>Step 3: Clear your cache and reload<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Save your changes, then clear your browser cache and any WordPress caching plugin or CDN cache. Otherwise you&#8217;ll keep seeing the old editor styles. Reload the post editor, and your Bootstrap buttons and Font Awesome icons now look the same as on the live site.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Block_editor_Gutenberg_notes\"><\/span>Block editor (Gutenberg) notes<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li>The block editor needs <code>add_theme_support( 'editor-styles' )<\/code>, as shown above. WordPress then loads your editor stylesheets into the editor canvas and scopes them so they don&#8217;t break the editor&#8217;s own interface.<\/li>\n<li>Bootstrap&#8217;s global styles (like body fonts and link colours) may change how the editor looks overall. That&#8217;s usually what you want, but if anything looks odd, import only the parts you need, such as buttons and utilities.<\/li>\n<li>Font Awesome icons need their font files. Loading the full <code>all.min.css<\/code> from a CDN takes care of that.<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Do_you_still_need_Bootstrap\"><\/span>Do you still need Bootstrap?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Bootstrap 5 dropped jQuery and is lighter than earlier versions (see <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2020\/04\/bootstrap-5-features\/\">what&#8217;s new in Bootstrap 5<\/a>), but loading the whole framework for a few buttons is still heavy. We switched our site to the 3 KB <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2021\/11\/chota-micro-css-framework\/\">Chota CSS framework<\/a> for speed. Whichever you use, the editor-style method above works the same way.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Frequently_asked_questions\"><\/span>Frequently asked questions<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"Will_this_change_how_my_posts_look_on_the_live_site\"><\/span>Will this change how my posts look on the live site?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>No. Editor stylesheets only affect the editor. Your live site keeps using your theme&#8217;s normal stylesheets.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Why_dont_my_changes_show_in_the_editor\"><\/span>Why don&#8217;t my changes show in the editor?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Usually it&#8217;s caching. Clear your browser cache, your caching plugin and your CDN, then reload the editor. Also check the stylesheet path is correct for your theme.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Can_I_use_this_with_a_child_theme\"><\/span>Can I use this with a child theme?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Yes. Add the code to the child theme&#8217;s <code>functions.php<\/code> and put <code>editor-style.css<\/code> in the child theme folder.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Do you use Bootstrap classes or Font Awesome icons in your WordPress posts, but they look plain in the editor?&#8230;<\/p>\n","protected":false},"author":4,"featured_media":42975,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"default","_kad_post_title":"default","_kad_post_layout":"default","_kad_post_sidebar_id":"","_kad_post_content_style":"default","_kad_post_vertical_padding":"default","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[6],"tags":[49,17],"class_list":["post-42968","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blogging","tag-tutorials","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/42968","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/comments?post=42968"}],"version-history":[{"count":1,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/42968\/revisions"}],"predecessor-version":[{"id":63642,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/42968\/revisions\/63642"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/media\/42975"}],"wp:attachment":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/media?parent=42968"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/categories?post=42968"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/tags?post=42968"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}