J3.x

J3.x:Joomla! Standard Icomoon Schriften

From Joomla! Documentation

Revision as of 08:11, 3 November 2017 by Xadomir (talk | contribs) (Created page with "CSS Template-Entwicklung")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Other languages:
Deutsch • ‎English • ‎Nederlands • ‎español • ‎français • ‎italiano • ‎русский • ‎فارسی • ‎中文(台灣)‎ • ‎日本語
Joomla! 
≥ 3.0.0

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');