Seit Joomla! 3.0.0 enthält das Joomla! CMS sein eigenes angepasstes Icomoon Font Set. Diese Symol-Schriftarten sind standardmäßig für den Einsatz in den Templates "Protostar" (Frontend), "Isis" (Administrator) und "Hathor" (Administrator) verfügbar.
Wie ist die Anwendung
Icon-Fonts können aufgerufen werden mit einem <span class="icon-name-des-icons"> Tag und einem {space}. z.B.
<span class="icon-joomla"> </span>
Zeigt das Joomla! Symbol:
Font Size
Denn die Symbole (Icons) sind Schriften, Du kannst die Größe von Ihnen mit einer zusätzlichen Klasse oder style= Anweisung kontrollieren. Natürlich kannst Du die Klasse in Deiner .css oder .less Stylesheet-Datei definieren.
<span class="icon-joomla large-icon"> </span>
<span class="icon-joomla" style="font-size:24px;"> </span>
Hier ist das Joomla! Symbol mit veränderter Größe:
Verfügbare Icomoon Symbole
Dies ist die komplette Liste, einschließlich der alternativen Namen um das-Symbol aufzurufen. Die Alternativen sind unten durch ein " / " getrennt.
joomla
address
apply / edit / pencil
archive / drawer-2
arrow-down-2
arrow-down-3
arrow-down-4
arrow-first
arrow-last
arrow-left-2
arrow-left-3
arrow-left-4
arrow-right-2
arrow-right-3
arrow-right-4
arrow-up-2
arrow-up-3
arrow-up-4
attachment / paperclip / flag-2
backward-2 / reply
backward-circle
ban-circle / minus-circle
bars
basket
book
bookmark
bookmark-2
box-add
box-remove
briefcase
broadcast / connection / wifi
brush
calendar
calendar-2
calendar-3
camera
camera-2 / video
cancel-circle
cart
chart
checkbox-partial
checkbox-unchecked
checkedout / lock / locked
checkin / checkbox / checkbox-checked
checkmark-2
checkmark-circle
chevron-down / downarrow / arrow-down
chevron-left / leftarrow / arrow-left
chevron-right / rightarrow / arrow-right
chevron-up / uparrow / arrow-up
circle
clock
cogs
comment / comments
comments-2
compass
contract
contract-2
credit
credit-2
cube
dashboard
database
delete / remove / cancel-2
download
enter
envelope / mail
envelope-opened / mail-2
equalizer
exit
expand
expand-2
expired
eye-close / eye-blocked / eye-2
eye-open / eye
featured / default / star
feed
file
file-2
file-add / file-plus
file-check
file-minus
file-remove
filter
first
flag
flag-3
folder-3
folder-close / folder-2
folder-minus
folder-open / folder
folder-plus
folder-plus-2
folder-remove
forward-2
forward-circle
grid / grid-view
grid-2 / grid-view-2
health
heart
heart-2
home
home-2
info
info-2 / info-circle
key
lamp
last
lightning / flash
link
list / list-view
list-2
location
loop
menu
menu-2
menu-3
minus / not-ok
minus-sign / minus-2
mobile
move
music
new / plus
next / forward
notification
notification-2 / notification-circle
options / cog
out-2 / new-tab
out-3 / new-tab-2
palette / color-palette
paragraph-center
paragraph-justify
paragraph-left
paragraph-right
pause
pause-circle
pencil-2
pending / warning
phone
phone-2
picture / image
pictures / images
pie
pin / pushpin
play
play-2 / video-2 / youtube
play-circle
plus-circle
power-cord
previous / backward
print / printer
publish / save / ok / checkmark
purge / trash
puzzle
question / question-sign / help
question-2 / question-circle
quote / quotes-left
quote-2 / quotes-right
quote-3 / bubble-quote
radio-checked / generic
radio-unchecked
save-copy / copy
save-new / plus-2
scissors
screen
screwdriver / tools
search
share / redo
share-alt / out
shield
shuffle
signup
smiley / smiley-happy
smiley-2 / smiley-happy-2
smiley-neutral
smiley-neutral-2
smiley-sad
smiley-sad-2
square
stack
star-2
stop
stop-circle
support
switch
tablet
tag
tag-2
tags
tags-2
thumbs-down
thumbs-up
tree
tree-2
unarchive / drawer
unblock / refresh / redo-2
undo
undo-2
unfeatured / asterisk / star-empty
unlock
unpublish / cancel
upload
user
users
vcard
wand
warning-2 / warning-circle
wrench
zoom-in
zoom-out
Einbinden in Dein Template
Dieser Abschnitt ist unvollständig.
Um die Icomoon Schriften in Deinem Template einzubinden, musst Du das css-Stylesheet (/media/jui/css/icomoon.css) hinzufügen oder in deine .less - Datei einbinden, wenn Du die .css - Stylesheet(s) generierst.
$doc = JFactory::getDocument();
$doc->addStyleSheet($this->baseurl.'/media/jui/css/icomoon.css');