(1) Installation

  • extensions>installer: install plugins
  • extensions>plugins: enable plugins

(2) Usage

  • content>articles>your Article
  • insert tag (either type or via editor button)
  • save

(3) Enable preview in editor view

By default the preview is not shown.

If you use the jce and a J! conform template containing Icomoon, the preview will work.

  • components: JCE>Editor Global Configuration>Formatting & Display>Editor Styles: Template CSS File

(4) Available Icons

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

(1) Content plugin

Just add a tag like {'qlico class="test"style="background:red;" type="icon-asterisk" preview=""} and the @ shows up!

[ Awesome! [

(2) Editor button

This plugin enables you to add J! icomoon icons into your article.

Simply add a tag like {'qlico type="icon-bookmark" preview=""} and appears in your text.

Feature Basic PRO
Editor button
Bugfix
Support