Joomla 3 IcoMoon font. Elenco completo delle icone

Probabilmente non sapevi, che in Joomla 3 è stato già integrato Bootstrap Quadro IcoMoon  font con le icone vetoriali che possiamo inserire sulla nostra pagina atraverso appositi stili CSS. Nonostante questa utilita i creatori di Joomla non si sono preoccupati mostrare questo set di icone e le loro classi corrispondenti in una lista separatamente. Almeno io un ellenco del genere non sono riuscito a trovare.

E dopo aver fatto delle ricerche al intero delle cartelle di Joomla ho trovato un file che contiene tutte le classi speciali e ho creato una tabella con delle  icone disponibili nel font IcoMoon e rispetivi classi.

Come funziona font di icone IcoMoon in Joomla

Esempio:

Vediamo come esempio il codice d'una semplice lista :

< ul > 
     < li > Wordpress < / li > 
     < li > Joomla < / li > 
     < li > Drupal < / li > 
< / ul >

E per visualizzare sul lato sinistro della voce Joomla la sua icona  basta agiungere la rispetiva classe

  • Wordpress
  • Joomla
  • Drupal

Abbimo agiunto ad elemento <li> della lista continente parola Joomla la classe  "icon-joomla", per arrivare al aspetto che vediamo sopra. Vediamo il codice finale

< ul > 
     < li > Wordpress < / li > 
     < li class = "icon-joomla" > Joomla < / li > 
     < li > Drupal < / li > 
< /ul >

La stessa cosa posiamo fare con tutte le altre icone della lista: trova la icona desiderata e mettila dove voi atraverso la sua classe personale .

Tuttavia c'è un problema: per default  font IcoMoon di icone è collegato di default  solo ai template predefiniti  di Joomla come per esempio template Protostar .

Al fine d'essere in grado di utilizzare queste icone dobbiamo collegare font IcoMoon al nostro tema scelto come predefinito è quindi vediamo come farlo.

Come collegare font di icone IcoMoon al tuo template predefinito

Fra le cartelle del template Protostar di Joomla  nella cartella css posiamo trovare un fail che si chiama template.css e aprendolo vediamo che proprio tramite questo fail è stato collegato il font IcoMoon che contiene le nostre icone. 

iconmoonJoomla

 

Vediamo due possibilita che abbiamo per collegarlo al nostro template predefinito:

La prima è abbastanza semplice  e sta nel fatto di importare font IcoMoon al interno del nostro template atraverso la regola di CSS  @import.  Andando nella cartella il tuo sito/media/jui/css e importare nel nostro foglio di stile il fail icomon.css che contiene al suo interno tutti i collegameti necesarie.

 

Vediamo la sintassi

 @import url("../../../media/jui/css/icomoon.css")
, e se volete  utilizare I fail less allora sara

@import url("../../../media/jui//less/icomoon.less")

 

Un altra soluzione e di importare il font IcoMoon come hanno fatto i creatori di Joomla nel template Protostar usare la regola @font-face e indicare tutti i percorsi al interno di questa regola che contunderanno al fail del font.

Sia nel primo variante sia nel secondo è importante di indicare in maniera giusta il percorso . Vorrei ricordare che i simboli ../ indicano che si esce dalla cartella per raggiunger il fail voluto, quantità di ripetizione di questo gruppo di simboli corrisponde alla quantità di cartelle che dobbiamo superare per ragiungere il fail come nelle matriosce russe.

 

@font-face {
    font-family: 'IcoMoon';
    src: url('../fonts/IcoMoon.eot');
    src: url('../fonts/IcoMoon.eot?#iefix') format('embedded-opentype'),
       url('../fonts/IcoMoon.woff') format('woff'),
       url('../fonts/IcoMoon.ttf') format('truetype'),
        url('../fonts/IcoMoon.svg#IcoMoon') format('svg');
    font-weight: normal;
    font-style: normal;
}
 

Come inserire le icone nei contenuti o voci del menu

Al inizio del articolo abbiamo visto come inserire le icone direttamente nel codice html e per inserirli tramite stili css dovremo usare le proprietà content insieme con pseudo-elementi :before e :after

Clicando nella frase precedenete parole content e pseudo-elementi scoprirai come usarli per inserire le icone.

E ora vediamo cosa avremo a disposizione una volta collegando il font  IcoMoon al nostro template. Io ho riportato solo i calssi per utilizzo nel codice html e per utilizare nei stili css dovrai consultare fail icommon.css di qui abbiamo parlato sopra.

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

 
Letto 2357 volte