Our Joomla modules use Font Awesome icons, and you can too

Last Updated:
Category:
Customization Tips

In templates from 2013 such as: CloudHost , Bluap and (M)Social we didn’t use typical, standard image icons – probably that’s why you couldn’t find any images, because those icons are fonts (scalable vector icons).

We used Font Awesome – that’s why:

  • You can add & use basic icons from a free collection of over 300 font icons.
  • By using Font Awesome icons are limited only by the dimensions of their documents – and they can scale without losing definition. You can look upon scalable icons in the same way as scalable font characters.
  • You can change their color and easily add shadows and change their transparency. In fact you can do anything with them that you can with fonts.
  • They are fully compatible with Bootstrap.
  • Font Awesome icons are vectors, which mean they’re gorgeous on high-resolution displays (iPad with Retina screen).

How to use Awesome Font shortcode (Font Awesome v3.2.x only)

Shortcode will generally work only for articles and module content in the editor screen. Use this shortcode:

laptop

where you want the laptop icon.

icons font

In this example I have changed two fonts icons from “laptop” & “signal” to “camera-retro” and “dashboard”.

new-icons

List of all available icons fonts which are used in template you can always check here:

  • fontawesome.io
  • and in template file here: gk_TemplateName/css/font-awesome.css.

Note: Since Font Awesome 4.0 was released in October 2013, we’ve learned that some things have changed. Version 4.0 have a new prefix class and some icons have been renamed. We include those changes in next template framework updates and templates in 2014. However, the Font Awesome v3.2.1 will stay in our “old” templates untouched.

For more details check the project website: fortawesome.github.io/Font-Awesome

Our Joomla modules use Font Awesome icons, and you can too 3.405 (68.00%) 5 votes

This article was first published

Villa Belluci - View our NEW theme
×

Tutorials & tips delivered regularly

Expand your purchase with regular tutorials and tips to making your site better, direct to your email.