The UAB template created for Joomla 3 sites contains IcoMoon, a library of icons available for use within articles and modules. To use any of these within your content, you'll need to attach a CSS class to an element. These class names are displayed next to their respective icons in the chart below.

For example, you could create a "contact us" button with an icon like this with the code shown below it:

Contact Us

<a class="btn" href="#"><i class="icon-envelope-opened"></i> Contact Us</a>
Replace the "#" with the url you'd like the button clicker to go to. Also note the color is green because this whole button is a link and green is our default link color.

Another example using the "greenbutton" class. Note that this example uses the "btn-large" class.

Contact Us

<a class="btn btn-large btn-greenbutton" href="#"><i class="icon-envelope-opened"></i> Contact Us</a>

As you might guess, there's a "btn-small" class as well. Contact Us

<a class="btn btn-small" href="#"><i class="icon-envelope-opened"></i>Contact Us</a>


.icon-joomla
.icon-chevron-up
.icon-uparrow
.icon-arrow-up
.icon-chevron-right
.icon-rightarrow
.icon-arrow-right
.icon-chevron-down
.icon-downarrow
.icon-arrow-down
.icon-chevron-left
.icon-leftarrow
.icon-arrow-left
.icon-arrow-first
.icon-arrow-last
.icon-arrow-up-2
.icon-arrow-right-2
.icon-arrow-down-2
.icon-arrow-left-2
.icon-arrow-up-3
.icon-arrow-right-3
.icon-arrow-down-3
.icon-arrow-left-3
.icon-menu-2
.icon-arrow-up-4
.icon-arrow-right-4
.icon-arrow-down-4
.icon-arrow-left-4
.icon-share
.icon-redo
.icon-undo
.icon-forward-2
.icon-backward-2
.icon-reply
.icon-unblock
.icon-refresh
.icon-redo-2
.icon-undo-2
.icon-move
.icon-expand
.icon-contract
.icon-expand-2
.icon-contract-2
.icon-play
.icon-pause
.icon-stop
.icon-previous
.icon-backward
.icon-next
.icon-forward
.icon-first
.icon-last
.icon-play-circle
.icon-pause-circle
.icon-stop-circle
.icon-backward-circle
.icon-forward-circle
.icon-loop
.icon-shuffle
.icon-search
.icon-zoom-in
.icon-zoom-out
.icon-apply
.icon-edit
.icon-pencil
.icon-pencil-2
.icon-brush
.icon-save-new
.icon-plus-2
.icon-ban-circle
.icon-minus-sign
.icon-minus-2
.icon-delete
.icon-remove
.icon-cancel-2
.icon-publish
.icon-save
.icon-ok
.icon-checkmark
.icon-new
.icon-plus
.icon-plus-circle
.icon-minus
.icon-not-ok
.icon-minus-circle
.icon-unpublish
.icon-cancel
.icon-cancel-circle
.icon-checkmark-2
.icon-checkmark-circle
.icon-info
.icon-info-2
.icon-info-circle
.icon-question
.icon-question-sign
.icon-help
.icon-question-2
.icon-question-circle
.icon-notification
.icon-notification-2
.icon-notification-circle
.icon-pending
.icon-warning
.icon-warning-2
.icon-warning-circle
.icon-checkbox-unchecked
.icon-checkin
.icon-checkbox
.icon-checkbox-checked
.icon-checkbox-partial
.icon-square
.icon-radio-unchecked
.icon-radio-checked
.icon-circle
.icon-signup
.icon-grid
.icon-grid-view
.icon-grid-2
.icon-grid-view-2
.icon-menu
.icon-list
.icon-list-view
.icon-list-2
.icon-menu-3
.icon-folder-open
.icon-folder
.icon-folder-close
.icon-folder-2
.icon-folder-plus
.icon-folder-minus
.icon-folder-3
.icon-folder-plus-2
.icon-folder-remove
.icon-file
.icon-file-2
.icon-file-add
.icon-file-plus
.icon-file-remove
.icon-file-minus
.icon-file-check
.icon-file-remove
.icon-save-copy
.icon-copy
.icon-stack
.icon-tree
.icon-tree-2
.icon-paragraph-left
.icon-paragraph-center
.icon-paragraph-right
.icon-paragraph-justify
.icon-screen
.icon-tablet
.icon-mobile
.icon-box-add
.icon-box-remove
.icon-download
.icon-upload
.icon-home
.icon-home-2
.icon-out-2
.icon-new-tab
.icon-out-3
.icon-new-tab-2
.icon-link
.icon-picture
.icon-image
.icon-pictures
.icon-images
.icon-palette
.icon-color-palette
.icon-camera
.icon-camera-2
.icon-video
.icon-play-2
.icon-video-2
.icon-youtube
.icon-music
.icon-user
.icon-users
.icon-vcard
.icon-address
.icon-share-alt
.icon-out
.icon-enter
.icon-exit
.icon-comment
.icon-comments
.icon-comments-2
.icon-quote
.icon-quotes-left
.icon-quote-2
.icon-quotes-right
.icon-quote-3
.icon-bubble-quote
.icon-phone
.icon-phone-2
.icon-envelope
.icon-mail
.icon-envelope-opened
.icon-mail-2
.icon-unarchive
.icon-drawer
.icon-archive
.icon-drawer-2
.icon-briefcase
.icon-tag
.icon-tag-2
.icon-tags
.icon-tags-2
.icon-options
.icon-cog
.icon-cogs
.icon-screwdriver
.icon-tools
.icon-wrench
.icon-equalizer
.icon-dashboard
.icon-switch
.icon-filter
.icon-purge
.icon-trash
.icon-checkedout
.icon-lock
.icon-locked
.icon-unlock
.icon-key
.icon-support
.icon-database
.icon-scissors
.icon-health
.icon-wand
.icon-eye-open
.icon-eye
.icon-eye-close
.icon-eye-blocked
.icon-eye-2
.icon-clock
.icon-compass
.icon-broadcast
.icon-connection
.icon-wifi
.icon-book
.icon-lightning
.icon-flash
.icon-print
.icon-printer
.icon-feed
.icon-calendar
.icon-calendar-2
.icon-calendar-3
.icon-pie
.icon-bars
.icon-chart
.icon-power-cord
.icon-cube
.icon-puzzle
.icon-attachment
.icon-paperclip
.icon-flag-2
.icon-lamp
.icon-pin
.icon-pushpin
.icon-location
.icon-shield
.icon-flag
.icon-flag-3
.icon-bookmark
.icon-bookmark-2
.icon-heart
.icon-heart-2
.icon-thumbs-up
.icon-thumbs-down
.icon-unfeatured
.icon-asterisk
.icon-star-empty
.icon-star-2
.icon-featured
.icon-default
.icon-star
.icon-smiley
.icon-smiley-happy
.icon-smiley-2
.icon-smiley-happy-2
.icon-smiley-sad
.icon-smiley-sad-2
.icon-smiley-neutral
.icon-smiley-neutral-2
.icon-cart
.icon-basket
.icon-credit
.icon-credit-2