View Bootstrap, Font Awesome in WordPress Visual Post Editor

By 2 years ago   BloggingTutorialsWordPress
Tweet Share Email Share  

How can you view Bootstrap styles and Font awesome icons in your WordPress post editor. Currently if you use these 2 essential design elements, 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?

Boostrap 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 is a great icon font which loads superfast and is useful way to replace all icons and icon images on your site.

For an example, here is what we are trying to do –  insert a simple button powered with both tools. The button is drawn by Bootstrap and the thumbs up icon by Font Awesome.

<span class="btn btn-lg btn-success">
<i class="fa fa-thumbs-up"></i> LIKE

This is how typically this code would like in your WordPress Visual Post Editor

nostyle wordpress editor

And this is how it looks like in my Post editor right now.

bootstrap in wordpress editor

First you need to add editor styles like 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 in place and a custom-css-styles.css file in place.

Most people like to pull the Boostrap and Font Awesome CSS from Bootstrap CDN, a free content delivery service to host this code by MaxCDN. We also use MaxCDN to host our static files as well for CDN purposes and many of the image and CSS you see on this site load superfast across the world because of CDN support.

So here is how you can place the code, by importing the CSS in the format

@import url( '  path/to/yourcssfile.css ' );

import custom css

Now when you place Bootstrap code or Font Awesome in your WordPress posts, you need not preview it everytime, simply view it live in your WordPress Post editor. Enjoy.

9 comments on “View Bootstrap, Font Awesome in WordPress Visual Post Editor

  1. Anh Tran says:

    Very nice tip! I love live preview in post editor. This is the best way and simplest way to do that!

  2. Asem says:

    Pretty good thanks for sharing.

  3. Grace Joseph says:

    simple and clear tips, i’ll definitely try these out. Good thing you shared this

  4. sandytul says:

    Thanks for thsi article…..nicely written

  5. Mr. Nasir says:

    Very helpful Tutorial. I proud of you who wrote it.

  6. Matan says:

    Cool! Very hopefull for wordpress users.

  7. Hi

    I am the first visitor on your blog , i am so much impressed with your blog. I like this such kind of info .
    Thanks for the postings.
    For more details you can visit on this given link ::

  8. Awesome your post. i like it

  9. Roy says:

    I thought there was plenty of action interspersed throughout the story, but the non-action was just as good. Excellent explanation of the problem at hand and how it was discovered etc.

Leave a Reply

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

ALL comments are moderated. No links allowed. Use real name. Only useful comments will be approved.