{"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":"2021-01-05T16:42:54","modified_gmt":"2021-01-05T11:12:54","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":"Import Bootstrap CSS, Font Awesome Icons in WordPress Visual Post Editor"},"content":{"rendered":"

How can you view Bootstrap CSS styles and Font awesome icons in your WordPress visual post editor? Currently, if you use these 2 essential design elements<\/a>, the changes are not visible in the WordPress visual post editor, and you need to preview the post live to see the changes. This makes effective implementation difficult as you need to constantly keep switching. Is there an easier way?<\/p>\n

Import Bootstrap CSS \/ Font Awesome Icons<\/h2>\n

Bootstrap<\/a> is the best front end mobile-first tool to develop great responsive websites, and we now use it on all our website designs. Font Awesome<\/a> is a great icon font that loads super fast and is a useful way to replace all icons and icon images on your site. If you use Bootstrap Themes like Quickstrap<\/a>, you will realize that you see in the WordPress post editor is actually not what is displayed on the live website once the post is saved or updated.\u00a0<\/span><\/p>\n

For example, I really cannot make out the blockquote test as it appears similar to the other post text. <\/span>So how can you get the WordPress visual editor to display bootstrap CSS or add Font Awesome icons such that the styling appears similar to what it would appear in the actual post?\u00a0<\/span><\/p>\n

For example, here is what we are trying to do – \u00a0insert a simple button powered with both tools. The button is drawn by Bootstrap and the thumbs up icon by Font Awesome.<\/p>\n

<span class=\"btn btn-lg btn-success\">\r\n<i class=\"fas fa-thumbs-up\"><\/i> LIKE\r\n<\/span><\/code><\/pre>\n
This is how typically this code would like in your WordPress Visual Post Editor<\/p>\n
\"nostyle<\/p>\n
And this is how it looks like in my Visual Post editor right now.<\/p>\n
\"bootstrap<\/p>\n
Add Editor Styles<\/h2>\n
Step 1<\/strong><\/span>\u00a0– First you need to add editor styles<\/a><\/strong> step-wise as I explained in the last post. Then if you have used that post tips to enable the custom styles for your post editor, then I assume you already have the WordPress function in functions.php<\/em><\/strong> in place and a custom-css-styles.css<\/em><\/strong> file in place.<\/p>\n
Import Bootstrap CSS<\/h2>\n
Step 2<\/strong><\/span> – So here is the fix that based on a similar example in the previous article, that you basically need to import the CSS URL<\/strong> into the editor stylesheet. <\/strong><\/span><\/p>\n
@import url(\"https:\/\/sitename.com\/wp-content\/themes\/themename\/css\/bootstrap.min.css\");\r\n@import url(\"https:\/\/sitename.com\/wp-content\/themes\/themename\/font-awesome\/css\/all.css\");<\/pre>\n
Clear WordPress Cache<\/h2>\n
Step 3<\/strong><\/span> – After you save the changes, it is very important to clear your browser cache as well as clear the WordPress cache, else you will notice no changes!\u00a0 After that, once you reload the WordPress editor again, you will see the similar Bootstrap or Font Awesome Icons or custom styling as that on your website. Simple. Done!<\/span><\/p>\n
Fix for Bootstrap CDN?<\/h3>\n
Many bloggers like to use free CDN<\/a> to import Bootstrap CSS or Font Awesome CSS. You can use their CDN URLs instead of linking to CSS on your site server for faster load times. For example.<\/p>\n
@import url(\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.4.1\/css\/bootstrap.min.css\");<\/pre>\n
Now when you place Bootstrap code or Font Awesome in your WordPress posts, you need not preview it every time, simply view it live in your WordPress Post editor. Enjoy.<\/p>\n","protected":false},"excerpt":{"rendered":"
How can you view Bootstrap CSS styles and Font awesome icons in your WordPress visual post editor? Currently, if you…<\/p>\n","protected":false},"author":4,"featured_media":42975,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_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":0,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/42968\/revisions"}],"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}]}}