WordPress Twitter Bootstrap plugin update: New Shortcode TBS_ICON

by Paul on February 28, 2012

WordPress, Twitter Bootstrap and Host Like ToastWe released WordPress Twitter Boostrap CSS plugin today, at version 2.0.1b

This release saw a whole heap of internal changes and improvement, most of which I’ll cover in the coming week so you can take full advantage of the features on offer.

In this article I’m going to explain quickly how to start using the Glyphicons to spruce up your posts, pages and your whole WordPress website.

Before you look at that however, if you have a few minutes, we think you should consider taking a quick look at our new WordPress backup solution – it’s going to change the world of WordPress website backup and recovery protection. Check it out…

New Twitter Bootstrap WordPress Shortcode: [TBS_ICON]

First take a look at the Glyphicons available from the Twitter Bootstrap library.

As you’ll see, there are many icons available in the library and each icon has its unique name.

To put any one of these icons in your WordPress posts, you simply need to enter the following text anywhere in your WordPress post/page editor:

[TBS_ICON class="icon-my-lovely-horse"]

You then replace the text “icon-my-lovely-horse” with the name of the icon you want (use the Glyphicons section on the Twitter Bootstrap site as a reference).

Twitter Bootstrap Glyphicons WordPress Shortcode Examples

I had to choose a default icon to show in case you didn’t specify the “class”. I decided upon “icon-star-empty” but please, if you want to use this icon specify it explicitly as I may change or remove the default in future releases for whatever reason.

Example 1: Default

So, the following shortcode :

[TBS_ICON]

will give you:

Example 2: Zoom In and Zoom out Glyphicons

The following shortcodes text:

[TBS_ICON class="icon-zoom-in"] and [TBS_ICON class="icon-zoom-out"]

will give you:

and

Example 3: Custom Glyphicon Styling

With all our shortcodes we offer full support for adding custom CSS styles and element IDs so you can style them directly.

You use the parameters “style” and “id” to achieve this and enter values exactly as you would in HTML.

The following shortcode:

[TBS_ICON class="icon-off" style="border: 1px solid green; background-color: yellow" id="my-icon"]

will yield:

with an HTML element ID of “my-icon” so you can refer to it anywhere in your CSS/Javascript definitions.

Example 4: Combining with other Bootstrap elements, e.g. Twitter Buttons

In this example, I’ll create a Twitter Bootstrap Button and embed a Twitter Glyphicon within it using our shortcodes.

The following shortcodes:

[TBS_BUTTON][TBS_ICON class="icon-trash" style="margin-right: 5px"]This is a rubbish button[/TBS_BUTTON]

will give you:

If you look closely at the code, I included a style of “margin-right: 5px” making the layout inside the button nicer. Without it the image and the text wouldn’t be as neat.

This highlights the power of customization that is available to you with our Twitter Bootstrap WordPress shortcodes. With only a little effort you can spice up your links, add funky icons to your text, and if you’re feeling bold start modifying whole sections of your WordPress theme.

Instant access to the power of Twitter Bootstrap in WordPress

Our WordPress Twitter Bootstrap CSS plugin gives you instant access to the power made available to us all with the Twitter Bootstrap library.

We hope that this new shortcode helps and you find it useful.

As always, we welcome feedback and suggestions about this and anything else that may be on your mind concerning our hosting and Managed WordPress Hosting service.

Use the form below to join our Developer Channel

Do you need an automated CPanel web hosting backup script? There is that and more in the Developer Channel

{ 5 comments… read them below or add one }

Justin March 25, 2012 at 5:03 am

I’m having difficulty adding the Glyphicons in the WordPress menu item, using the css class. Is this because it requires using an <i class… ?

Thanks for any suggestions 🙂

Reply

Paul March 25, 2012 at 9:38 am

Hi Justin,

I actually use the Glyphicon for home in our menu at the top and the simple way to do this is, within the WordPress menu interface, edit the menu text for the item you want to have a glyphicon.

So, under the field “Navigation Label” WordPress would have filled it in with the text from the title of the item. Just add something like the following:

<i class=”icon-home”></i>

to the navigation label text and it should appear.

Thanks for commenting and asking the question. I hope you’re able to get it working – please let me know if you do!

Thanks!
Paul.

Reply

nathan June 8, 2012 at 3:23 am

Is there is a way to make the icon larger – say 50px

I’ve been trying, as an example:

[TBS_ICON class="icon-zoom-in" style="font-size: 50px;"]

Looking forward to hearing what you guys have to say.

Cheers –

Nathan

Reply

Paul June 8, 2012 at 10:51 am

Hi Nathan,

Unfortunately, no, there’s no way to do this because the (glyph) images aren’t fonts – they’re just little images.

However, there is a free service out there, Font Awesome (http://fortawesome.github.com/Font-Awesome/)

that has taken the glyphs and converted them to vector images that you can then use like fonts. You can use the “Custom CSS” option in the WordPress Bootstrap plugin to include the CSS file for Font-Awesome. I haven’t done it myself, so I can’t guide you on this, but this is one option you could look into…

Hope that helps! And thanks for the comment.
Cheers,
Paul.

Reply

nathan June 9, 2012 at 1:01 am

Paul –

Thanks – I’ll look into it the issue more in-depth this weekend but as of now struggling to call the vectors as fonts.

Sticking with the glyph solution for now. Just looking for a work around to including the icons as images.

Thank you for your help!

Cheers –

Nathan

Reply

Leave a Comment

Previous post:

Next post: