Sunday, 06 December 2015 18:20

Fontawesome in Joomla Gantry Framework v.4

Written by 
Rate this item
(0 votes)

Joomla Gantry Framework 4 supports font-awesome. Font awesome is pictographic language which delivers over 200 "font-icons". We just use them like ordinary fonts, not png files.

I use font awesome on my website. On the front page and contact form

It is really easy effect to achieve. Can be used everywhere, from the front page of your Joomla website too spice up contact form.

 

Fontawesome icon-desktop

I used div with class icon-desktop and another custom class iconsize to increase and style fontawesome. Raw code looks like this:

<div class="iconsize icon-desktop "> </div>

Another example:

 

Fontawesome icon-tablet

Raw code is simple

<div class="iconsize icon-tablet"> </div>

Instead of using div we can use span to achieve desirable effect.

In Joomla Gantry Framework fontawesome files are located in:

/libraries/gantry/assets/jui/less/font-awesome/

Just in case you have a problem with fonts. And have a look at .less file itself.

There are more fonts to play with:

<p><span class="icon-time"> Lorem Ipsum<br /></span></p>
<p><span class="icon-film">Lorem Ipsum</span></p>
<p><span class="icon-headphones">Lorem Ipsum</span></p>
<p><span class="icon-eject">Lorem Ipsum</span></p>

 

The "front-end" output should be like below:

icon-time

icon-film

icon-headphones

icon-eject

 

By default - color is the same as font color but we can very quickly add new classes to font-awsome.less, or add extra class to container

More references:

 

Add .icon-CLASS_NAME to any element, best used with a <span>.

Web Icons

icon-adjust

icon-asterisk

icon-ban-circle

icon-bar-chart

icon-barcode

icon-beaker

icon-beer

icon-bell

icon-bell-alt

icon-bolt

icon-book

icon-bookmark

icon-bookmark-empty

icon-briefcase

icon-bullhorn

icon-calendar

icon-camera

icon-camera-retro

icon-certificate

icon-check

icon-check-empty

icon-circle

icon-circle-blank

icon-cloud

icon-cloud-download

icon-cloud-upload

icon-coffee

icon-cog

icon-cogs

icon-comment

icon-comment-alt

icon-comments

icon-comments-alt

icon-credit-card

icon-dashboard

icon-desktop

icon-download

icon-download-alt

icon-edit

icon-envelope

icon-envelope-alt

icon-exchange

icon-exclamation-sign

icon-external-link

icon-eye-close

icon-eye-open

icon-facetime-video

icon-fighter-jet

icon-film

icon-filter

icon-fire

icon-flag

icon-folder-close

icon-folder-open

icon-folder-close-alt

icon-folder-open-alt

icon-food

icon-gift

icon-glass

icon-globe

icon-group

icon-hdd

icon-headphones

icon-heart

icon-heart-empty

icon-home

icon-inbox

icon-info-sign

icon-key

icon-leaf

icon-laptop

icon-legal

icon-lemon

icon-lightbulb

icon-lock

icon-unlock

icon-magic

icon-magnet

icon-map-marker

icon-minus

icon-minus-sign

icon-mobile-phone

icon-money

icon-move

icon-music

icon-off

icon-ok

icon-ok-circle

icon-ok-sign

icon-pencil

icon-picture

icon-plane

icon-plus

icon-plus-sign

icon-print

icon-pushpin

icon-qrcode

icon-question-sign

icon-quote-left

icon-quote-right

icon-random

icon-refresh

icon-remove

icon-remove-circle

icon-remove-sign

icon-reorder

icon-reply

icon-resize-horizontal

icon-resize-vertical

icon-retweet

icon-road

icon-rss

icon-screenshot

icon-search

icon-share

icon-share-alt

icon-shopping-cart

icon-signal



icon-signout

icon-sitemap

icon-sort

icon-sort-down

icon-sort-up

icon-spinner

icon-star

icon-star-empty

icon-star-half

icon-tablet

icon-tag

icon-tags

icon-tasks

icon-thumbs-down

icon-thumbs-up

icon-time

icon-tint

icon-trash

icon-trophy

icon-truck

icon-umbrella

icon-upload

icon-upload-alt

icon-user

icon-user-md

icon-volume-off

icon-volume-down

icon-volume-up

icon-warning-sign

icon-wrench

icon-zoom-in

icon-zoom-out

 

Text Editor Icons

icon-file

icon-file-alt

icon-cut

icon-copy

icon-paste

icon-save

icon-undo

icon-repeat

icon-text-height

icon-text-width

icon-align-left

icon-align-center

icon-align-right

icon-align-justify

icon-indent-left

icon-indent-right

icon-font

icon-bold

icon-italic

icon-strikethrough

icon-underline

icon-link

icon-paper-clip

icon-columns

icon-table

icon-th-large

icon-th

icon-th-list

icon-list

icon-list-ol

icon-list-ul

icon-list-alt

 

Directional Icons

icon-angle-left

icon-angle-right

icon-angle-up

icon-angle-down

icon-arrow-down

icon-arrow-left

icon-arrow-right

icon-arrow-up

icon-caret-down

icon-caret-left

icon-caret-right

icon-caret-up

icon-chevron-down

icon-chevron-left

icon-chevron-right

icon-chevron-up

icon-circle-arrow-down

icon-circle-arrow-left

icon-circle-arrow-right

icon-circle-arrow-up

icon-double-angle-left

icon-double-angle-right

icon-double-angle-up

icon-double-angle-down

icon-hand-down

icon-hand-left

icon-hand-right

icon-hand-up

icon-circle

icon-circle-blank

 

Video Player Icons

icon-play-circle

icon-play

icon-pause

icon-stop

icon-step-backward

icon-fast-backward

icon-backward

icon-forward

icon-fast-forward

icon-step-forward

icon-eject

icon-fullscreen

icon-resize-full

icon-resize-small

 

Social Icons

icon-phone

icon-phone-sign

icon-facebook

icon-facebook-sign

icon-twitter

icon-twitter-sign

icon-github

icon-github-alt

icon-github-sign

icon-linkedin

icon-linkedin-sign

icon-pinterest

icon-pinterest-sign

icon-google-plus

icon-google-plus-sign

icon-sign-blank

 

Medical Icons

icon-ambulance

icon-beaker

icon-h-sign

icon-hospital

icon-medkit

icon-plus-sign-alt

icon-stethoscope

icon-user-md

 
<span class="icon-CLASS_NAME">
  ...
</span>
<span class="icon-download">
  ...
</span>
 

The documented typography above is a modified version of the reference guide available at: http://twitter.github.com/bootstrap/base-css.html

Read 1558 times Last modified on Sunday, 06 December 2015 18:24