Icônes fontello

Le générateur de police iconique FONTELLO permet de remplacer la police d'icones de Joomla par son propre jeu.

En ce qui me concerne, j'utilise un jeu réduit de la police icomoon limité aux icônes utilisés par Joomla en Frontend. Le gain (police+css) est de 26ko, la police Icomoon occupant 55Ko. Pour des raisons de compatibilité, j'ai renommé les icônes avec les noms utilisés par Joomla.

icon-arrow-left
icon-arrow-right
icon-chevron-left
icon-chevron-right
icon-calendar
icon-cancel
icon-cog
icon-delete
icon-download
icon-remove
icon-edit
icon-envelope
icon-eye-open
icon-folder
icon-help
icon-joomla
icon-question-sign
icon-list
icon-location
icon-lock
icon-minus
icon-ok
icon-out-2
icon-plus
icon-print
icon-search
icon-star
icon-tags
icon-upload
icon-user
icon-zoom-in

En bonus

Ces icônes ne sont pas utilisées par le core Joomla, mais j'ai trouvé pratique de les inclure.

icon-arrow-up
icon-arrow-down
icon-home
icon-menu
icon-first
icon-previous
icon-next
icon-last
icon-square

Icônes Icomoon

Le jeu complet fourni par Bootstrap. En rouge, les icônes reprises dans Fontello

Si toutes les icônes ne sont pas visibles, c'est que le jeu Icommon n'est pas actif sur le site.

.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

Téléchargement / installation

Pour utiliser le jeu d'icones présenté au début de cet article, vous pouvez télécharger le fichier ci-dessous qui contient les fichiers EOT, SVG, TTF et WOFF ainsi que le fichier CSS pour les utiliser.

Il est prévu que le dossier "fontello" soit copié dans le dossier "fonts" de votre template. Le fichier CSS étant naturellement dans le sous-dossier "css". Pour les curieux, j'ai inclus le partiel SCSS que j'utilise pour inclure ces règles dans mon unique fichier "template.css"

Il faut bien entendu empêcher le chargement du fichier Icomoon de Joomla, mais cela est à gérer en fonction du template que vous utilisez.

Vous pouvez également créer votre propre jeu d'icônes sur le site FONTELLO. Inspirez-vous de mon fichier CSS pour créer le vôtre. Il est important

Inutile de me demander de l'aide, cette technique délicate n'a de sens que si vous utilisez votre propre template ou que vous vous sentez l'âme d'un bidouilleur.

Print Friendly and PDF