General Usage

Adding an icon is as simple as adding the class .icon-* to an element where * stands for the name of the icon. Usually an extra span element is used.

Creating icon elements in PHP

Each time the icon set changes the class tao_helpers_Icon is being updated automatically. It provides convenient ways to create icons programatically.

One way to do this is to use the method tao_helpers_Icon::iconNameToCamelCase($options=array())

    tao_helpers_Icon::iconCheckbox();

Optionally this method accepts a hash table with HTML attributes. You can also change the tag name by setting array('element' => 'myFavoriteHtmlElement').

    tao_helpers_Icon::iconCheckbox(
        array(
            'element'      => 'b',
            'class'        => 'art',
            'title'        => __('Ceci n’est pas une pipe'),
            'data-painter' => 'René Magritte'
        )
    );

Note: While the above way to change the element technically works there is no guarantee that the result looks exactly as intended. The preferred way is to embed the default span, even when this means you use an additional element.

Another possibility is to use the class constant tao_helpers_Icon::CLASS_ICON_NAME_TO_UPPER_CASE

Using icons in SCSS

In this scenario you have a class .foo that for some reasons should use the code of .icon-bar.

    @import 'inc/bootstrap';
    .foo {
        @extend %icon-bar;
    }

Note: Never extend CSS class .icon-bar directly, always reference the SCSS variable %icon-bar instead!

List of all existing icons along with their class name

The CSS class for all icons is .icon- followed by the corresponding identifier below. You can also hover over each field to display the CSS class.

  • add
  • align-left
  • align-right
  • anchor
  • associate
  • audio
  • background-color
  • backward
  • bin
  • block-quote
  • bold
  • calendar
  • center
  • checkbox
  • checkbox-bg
  • checkbox-checked
  • checkbox-crossed
  • checkbox-indeterminate
  • choice
  • circle
  • click-to-speak
  • clipboard
  • clock
  • close
  • column
  • compress
  • connect
  • continue
  • contrast
  • copy
  • cut
  • danger
  • decrease-indent
  • delivery
  • delivery-small
  • desktop-preview
  • disconnect
  • div-container
  • document
  • down
  • download
  • edit
  • eject
  • eliminate
  • ellipsis
  • email
  • end-attempt
  • eraser
  • error
  • export
  • extended-text
  • extension
  • external
  • eye-slash
  • fast-backward
  • fast-forward
  • filebox
  • filter
  • find
  • fix
  • folder
  • folder-open
  • font
  • forward
  • free-form
  • gap-match
  • graphic-associate
  • graphic-gap
  • graphic-order
  • grip
  • grip-h
  • guide-arrow
  • headphones
  • help
  • home
  • hotspot
  • hottext
  • icon
  • image
  • import
  • increase-indent
  • info
  • inline-choice
  • insert-horizontal-line
  • italic
  • item
  • justify
  • laptop
  • larger
  • left
  • left-right
  • link
  • lock
  • login
  • logout
  • loop
  • magicwand
  • map-o
  • match
  • maths
  • media
  • meta-data
  • microphone
  • microphone-off
  • mobile-menu
  • mobile-preview
  • move
  • move-item
  • multi-select
  • new-page
  • not-evaluated
  • ol
  • order
  • ownership-transfer
  • paste
  • paste-text
  • paste-word
  • pause
  • phone
  • pin
  • play
  • polygon
  • preview
  • print
  • property-add
  • property-advanced
  • radio
  • radio-bg
  • radio-checked
  • range-slider-left
  • range-slider-right
  • rectangle
  • redo
  • reload
  • remove
  • replace
  • repository
  • repository-add
  • repository-remove
  • reset
  • resize
  • resize-grid
  • result
  • result-nok
  • result-ok
  • result-server
  • result-small
  • right
  • right-left
  • row
  • rubric
  • save
  • screen
  • select-all
  • select-point
  • settings
  • shared-file
  • shield
  • shuffle
  • slider
  • smaller
  • source
  • special-character
  • speech-bubble
  • speed
  • spell-check
  • sphere
  • spinner
  • step-backward
  • step-forward
  • stop
  • strike-through
  • style
  • subscript
  • success
  • summary-report
  • superscript
  • tab
  • table
  • tablet
  • tablet-preview
  • tag
  • target
  • templates
  • test
  • test-taker
  • test-takers
  • text-color
  • text-entry
  • text-marker
  • time
  • tools
  • tooltip
  • translate
  • tree
  • ul
  • underline
  • undo
  • unlink
  • unlock
  • unshield
  • untab
  • up
  • upload
  • user
  • users
  • variable
  • video
  • volume
  • warning
  • wheelchair