JB Type is now Joomla 3.0 ready

12 Oct 2012 - Written by Anthony Olsen

Our free Joomla typography plugin is now available for Joomla 3.0 and now also comes with built in syntax for the Bootstrap glyph icons. You can download JB Type over at the JB Type plugin page.

Some new icons.

In anticipation of making the move to Bootstrap in the next few months, I have also included some of the bootstrap glyph icons into the array of icons available with the plugin.

Although the new fonts will work out of the box in Joomla 3.0, if you want to use the new icon syntax in Joomla 2.5 or Joomla 1.5 you need to ensure that you have the Bootstrap css and assets loading on the page.

Adding bootstrap to Joomla 2.5.

Thankfully @phpRoberto has put together an excellent little plugin that will do this for you in Joomla 2.5. So to use the new icons in Joomla 2.5 you need to install JB Type as well as the twitter bootstrap plugin for Joomla 2.5.

The new syntax and the new icons.

You can see the icons available in 1.6 of JB Type below and their relevant code listed below that.

jbTypeNew

{jb_icon-glass}This is the jb_icon-glass style.{/jb_icon-glass} {jb_icon-music}This is the jb_icon-music style.{/jb_icon-music} {jb_icon-search}This is the jb_icon-search style.{/jb_icon-search} {jb_icon-envelope}This is the jb_icon-envelope style.{/jb_icon-envelope} {jb_icon-heart}This is the jb_icon-heart style.{/jb_icon-heart} {jb_icon-star}This is the jb_icon-star style.{/jb_icon-star} {jb_icon-star-empty}This is the jb_icon-star-empty style.{/jb_icon-star-empty} {jb_icon-user}This is the jb_icon-user style.{/jb_icon-user} {jb_icon-film}This is the jb_icon-film style.{/jb_icon-film} {jb_icon-th-large}This is the jb_icon-th-large style.{/jb_icon-th-large} {jb_icon-th}This is the jb_icon-th style.{/jb_icon-th} {jb_icon-th-list}This is the jb_icon-th-list style.{/jb_icon-th-list} {jb_icon-ok}This is the jb_icon-ok style.{/jb_icon-ok} {jb_icon-remove}This is the jb_icon-remove style.{/jb_icon-remove} {jb_icon-zoom-in}This is the jb_icon-zoom-in style.{/jb_icon-zoom-in} {jb_icon-zoom-out}This is the jb_icon-zoom-out style.{/jb_icon-zoom-out} {jb_icon-off}This is the jb_icon-off style.{/jb_icon-off} {jb_icon-signal}This is the jb_icon-signal style.{/jb_icon-signal} {jb_icon-cog }This is the jb_icon-cog style.{/jb_icon-cog } {jb_icon-trash}This is the jb_icon-trash style.{/jb_icon-trash} {jb_icon-home}This is the jb_icon-home style.{/jb_icon-home} {jb_icon-file}This is the jb_icon-file style.{/jb_icon-file} {jb_icon-time}This is the jb_icon-time style.{/jb_icon-time} {jb_icon-road}This is the jb_icon-road style.{/jb_icon-road} {jb_icon-download-alt}This is the jb_icon-download-alt style.{/jb_icon-download-alt} {jb_icon-download}This is the jb_icon-download style.{/jb_icon-download} {jb_icon-upload}This is the jb_icon-upload style.{/jb_icon-upload} {jb_icon-inbox}This is the jb_icon-inbox style.{/jb_icon-inbox} {jb_icon-play-circle}This is the jb_icon-play-circle style.{/jb_icon-play-circle} {jb_icon-repeat }This is the jb_icon-repeat style.{/jb_icon-repeat } {jb_icon-refresh}This is the jb_icon-refresh style.{/jb_icon-refresh} {jb_icon-list-alt}This is the jb_icon-list-alt style.{/jb_icon-list-alt} {jb_icon-lock }This is the jb_icon-lock style.{/jb_icon-lock } {jb_icon-flag}This is the jb_icon-flag style.{/jb_icon-flag} {jb_icon-headphones}This is the jb_icon-headphones style.{/jb_icon-headphones} {jb_icon-volume-off}This is the jb_icon-volume-off style.{/jb_icon-volume-off} {jb_icon-volume-down}This is the jb_icon-volume-down style.{/jb_icon-volume-down} {jb_icon-volume-up}This is the jb_icon-volume-up style.{/jb_icon-volume-up} {jb_icon-qrcode}This is the jb_icon-qrcode style.{/jb_icon-qrcode} {jb_icon-barcode}This is the jb_icon-barcode style.{/jb_icon-barcode} {jb_icon-tag}This is the jb_icon-tag style.{/jb_icon-tag} {jb_icon-tags}This is the jb_icon-tags style.{/jb_icon-tags} {jb_icon-book}This is the jb_icon-book style.{/jb_icon-book} {jb_icon-bookmark}This is the jb_icon-bookmark style.{/jb_icon-bookmark} {jb_icon-print}This is the jb_icon-print style.{/jb_icon-print} {jb_icon-camera}This is the jb_icon-camera style.{/jb_icon-camera} {jb_icon-font}This is the jb_icon-font style.{/jb_icon-font} {jb_icon-bold}This is the jb_icon-bold style.{/jb_icon-bold} {jb_icon-italic}This is the jb_icon-italic style.{/jb_icon-italic} {jb_icon-text-height}This is the jb_icon-text-height style.{/jb_icon-text-height} {jb_icon-text-width}This is the jb_icon-text-width style.{/jb_icon-text-width} {jb_icon-align-left}This is the jb_icon-align-left style.{/jb_icon-align-left} {jb_icon-align-center}This is the jb_icon-align-center style.{/jb_icon-align-center} {jb_icon-align-right}This is the jb_icon-align-right style.{/jb_icon-align-right} {jb_icon-align-justify}This is the jb_icon-align-justify style.{/jb_icon-align-justify} {jb_icon-list}This is the jb_icon-list style.{/jb_icon-list} {jb_icon-indent-left}This is the jb_icon-indent-left style.{/jb_icon-indent-left} {jb_icon-indent-right}This is the jb_icon-indent-right style.{/jb_icon-indent-right} {jb_icon-facetime-video}This is the jb_icon-facetime-video style.{/jb_icon-facetime-video} {jb_icon-picture}This is the jb_icon-picture style.{/jb_icon-picture} {jb_icon-pencil}This is the jb_icon-pencil style.{/jb_icon-pencil} {jb_icon-map-marker }This is the jb_icon-map-marker style.{/jb_icon-map-marker } {jb_icon-adjust}This is the jb_icon-adjust style.{/jb_icon-adjust} {jb_icon-tint}This is the jb_icon-tint style.{/jb_icon-tint} {jb_icon-edit}This is the jb_icon-edit style.{/jb_icon-edit} {jb_icon-share}This is the jb_icon-share style.{/jb_icon-share} {jb_icon-check}This is the jb_icon-check style.{/jb_icon-check} {jb_icon-move}This is the jb_icon-move style.{/jb_icon-move} {jb_icon-step-backward}This is the jb_icon-step-backward style.{/jb_icon-step-backward} {jb_icon-fast-backward}This is the jb_icon-fast-backward style.{/jb_icon-fast-backward} {jb_icon-backward}This is the jb_icon-backward style.{/jb_icon-backward} {jb_icon-play}This is the jb_icon-play style.{/jb_icon-play} {jb_icon-pause}This is the jb_icon-pause style.{/jb_icon-pause} {jb_icon-stop}This is the jb_icon-stop style.{/jb_icon-stop} {jb_icon-forward}This is the jb_icon-forward style.{/jb_icon-forward} {jb_icon-fast-forward}This is the jb_icon-fast-forward style.{/jb_icon-fast-forward} {jb_icon-step-forward}This is the jb_icon-step-forward style.{/jb_icon-step-forward} {jb_icon-eject}This is the jb_icon-eject style.{/jb_icon-eject} {jb_icon-chevron-left}This is the jb_icon-chevron-left style.{/jb_icon-chevron-left} {jb_icon-chevron-right }This is the jb_icon-chevron-right style.{/jb_icon-chevron-right } {jb_icon-plus-sign}This is the jb_icon-plus-sign style.{/jb_icon-plus-sign} {jb_icon-minus-sign}This is the jb_icon-minus-sign style.{/jb_icon-minus-sign} {jb_icon-remove-sign}This is the jb_icon-remove-sign style.{/jb_icon-remove-sign} {jb_icon-ok-sign}This is the jb_icon-ok-sign style.{/jb_icon-ok-sign} {jb_icon-question-sign}This is the jb_icon-question-sign style.{/jb_icon-question-sign} {jb_icon-info-sign}This is the jb_icon-info-sign style.{/jb_icon-info-sign} {jb_icon-screenshot}This is the jb_icon-screenshot style.{/jb_icon-screenshot} {jb_icon-remove-circle}This is the jb_icon-remove-circle style.{/jb_icon-remove-circle} {jb_icon-ok-circle}This is the jb_icon-ok-circle style.{/jb_icon-ok-circle} {jb_icon-ban-circle}This is the jb_icon-ban-circle style.{/jb_icon-ban-circle} {jb_icon-arrow-left}This is the jb_icon-arrow-left style.{/jb_icon-arrow-left} {jb_icon-arrow-right}This is the jb_icon-arrow-right style.{/jb_icon-arrow-right} {jb_icon-arrow-up}This is the jb_icon-arrow-up style.{/jb_icon-arrow-up} {jb_icon-arrow-down}This is the jb_icon-arrow-down style.{/jb_icon-arrow-down} {jb_icon-share-alt}This is the jb_icon-share-alt style.{/jb_icon-share-alt} {jb_icon-resize-full}This is the jb_icon-resize-full style.{/jb_icon-resize-full} {jb_icon-resize-small}This is the jb_icon-resize-small style.{/jb_icon-resize-small} {jb_icon-plus}This is the jb_icon-plus style.{/jb_icon-plus} {jb_icon-minus}This is the jb_icon-minus style.{/jb_icon-minus} {jb_icon-asterisk}This is the jb_icon-asterisk style.{/jb_icon-asterisk} {jb_icon-exclamation-sign}This is the jb_icon-exclamation-sign style.{/jb_icon-exclamation-sign} {jb_icon-gift}This is the jb_icon-gift style.{/jb_icon-gift} {jb_icon-leaf}This is the jb_icon-leaf style.{/jb_icon-leaf} {jb_icon-fire}This is the jb_icon-fire style.{/jb_icon-fire} {jb_icon-eye-open }This is the jb_icon-eye-open style.{/jb_icon-eye-open } {jb_icon-eye-close}This is the jb_icon-eye-close style.{/jb_icon-eye-close} {jb_icon-warning-sign}This is the jb_icon-warning-sign style.{/jb_icon-warning-sign} {jb_icon-plane}This is the jb_icon-plane style.{/jb_icon-plane} {jb_icon-calendar}This is the jb_icon-calendar style.{/jb_icon-calendar} {jb_icon-random}This is the jb_icon-random style.{/jb_icon-random} {jb_icon-comment}This is the jb_icon-comment style.{/jb_icon-comment} {jb_icon-magnet}This is the jb_icon-magnet style.{/jb_icon-magnet} {jb_icon-chevron-up}This is the jb_icon-chevron-up style.{/jb_icon-chevron-up} {jb_icon-chevron-down}This is the jb_icon-chevron-down style.{/jb_icon-chevron-down} {jb_icon-retweet}This is the jb_icon-retweet style.{/jb_icon-retweet} {jb_icon-shopping-cart}This is the jb_icon-shopping-cart style.{/jb_icon-shopping-cart} {jb_icon-folder-close}This is the jb_icon-folder-close style.{/jb_icon-folder-close} {jb_icon-folder-open}This is the jb_icon-folder-open style.{/jb_icon-folder-open} {jb_icon-resize-vertical}This is the jb_icon-resize-vertical style.{/jb_icon-resize-vertical} {jb_icon-resize-horizontal}This is the jb_icon-resize-horizontal style.{/jb_icon-resize-horizontal} {jb_icon-hdd }This is the jb_icon-hdd style.{/jb_icon-hdd } {jb_icon-bullhorn}This is the jb_icon-bullhorn style.{/jb_icon-bullhorn} {jb_icon-bell}This is the jb_icon-bell style.{/jb_icon-bell} {jb_icon-certificate}This is the jb_icon-certificate style.{/jb_icon-certificate} {jb_icon-thumbs-up}This is the jb_icon-thumbs-up style.{/jb_icon-thumbs-up} {jb_icon-thumbs-down}This is the jb_icon-thumbs-down style.{/jb_icon-thumbs-down} {jb_icon-hand-right}This is the jb_icon-hand-right style.{/jb_icon-hand-right} {jb_icon-hand-left}This is the jb_icon-hand-left style.{/jb_icon-hand-left} {jb_icon-hand-up}This is the jb_icon-hand-up style.{/jb_icon-hand-up} {jb_icon-hand-down}This is the jb_icon-hand-down style.{/jb_icon-hand-down} {jb_icon-circle-arrow-right}This is the jb_icon-circle-arrow-right style.{/jb_icon-circle-arrow-right} {jb_icon-circle-arrow-left}This is the jb_icon-circle-arrow-left style.{/jb_icon-circle-arrow-left} {jb_icon-circle-arrow-up}This is the jb_icon-circle-arrow-up style.{/jb_icon-circle-arrow-up} {jb_icon-circle-arrow-down}This is the jb_icon-circle-arrow-down style.{/jb_icon-circle-arrow-down} {jb_icon-globe}This is the jb_icon-globe style.{/jb_icon-globe} {jb_icon-wrench}This is the jb_icon-wrench style.{/jb_icon-wrench} {jb_icon-tasks}This is the jb_icon-tasks style.{/jb_icon-tasks} {jb_icon-filter}This is the jb_icon-filter style.{/jb_icon-filter} {jb_icon-briefcase}This is the jb_icon-briefcase style.{/jb_icon-briefcase} {jb_icon-fullscreen}This is the jb_icon-fullscreen style.{/jb_icon-fullscreen}

More goodies coming to JB Type

In the next few months I'm hoping to add more font icons and other little goodies to JB Type, as well as revamoing the existing icon offerings available. Technology has changed a fair bit since JB Type came onto the scene so it's quite likely that we will drop icons as images all together and move towards a font icon approach. More on this later.