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 programmatically.

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

How to add a new icon to the TAO font

  1. Check out the latest develop branch of extension-tao-devtools and install it in a fresh instance of TAO.
  2. Go to the Icomoon web app.
  3. Click 'Import icons'. The file you need to upload here, containing all the TAO icon definitions, is taoDevTools/fontConversion/assets/selection.json. Once uploaded, you should see over 200 icons appear on screen in the Icomoon web app.
  4. Now you can look for the new icon you want to add to this selection. You can search on Icomoon for something free or open-source (Font Awesome is preferred), or even upload your own SVG icon. tao icons

  5. Once the new non-TAO icon(s) are added to the selection, you must edit their metadata (using the pencil tool). Set the grid size to 32, and the tag and name to whatever name you want it to have on TAO. editing icon

  6. Next, close the edit dialog and click 'Generate Font' and 'Download', which will give you a zip file.
  7. Log in to TAO as admin, and navigate to 'Tools' > 'TAO Icon Font' (you won't find it unless taoDevTools is installed). Here you will upload the zip file you just got. After refreshing the page, you should see a placeholder for your new icon in the grid.
  8. Some files have been automagically changed: tao/helpers/class.Icon.php and some SCSS files in tao/views/scss/inc/fonts. You will therefore need to run the SCSS compilation task for the extension:
    npx grunt taosass
  9. You should now be able to test your icon anywhere on TAO.
  10. Commit your changes to extension-tao-devtools (1 file) and make a PR to develop.
  11. Commit your changes to tao-core (~9 files) and make a PR to develop.

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