J3.x

Использование стандартных шрифтов Joomla Icomoon

From Joomla! Documentation

This page is a translated version of the page J3.x:Joomla Standard Icomoon Fonts and the translation is 93% complete.

Other languages:
Deutsch • ‎English • ‎español • ‎فارسی • ‎français • ‎italiano • ‎日本語 • ‎Nederlands • ‎русский
Joomla! 
≥ 3.0.0

Начиная с Joomla 3.0.0, Joomla! CMS поставляется со своим собственным набором шрифтов Icomoon. Эти шрифты значков доступны по умолчанию для использования в шаблонах "Protostar" (Frontend), "Isis" (Administrator) и "Hathor" (Administrator).

How to Use

Значки шрифтов можно вызывать тегом <span class="icon-name-of-icon"> и {пробел}. например

<span class="icon-joomla"> </span>

Joomla! покажет иконку:  

Размер шрифта

Поскольку значки являются шрифтами, вы можете контролировать их размер с помощью добавленного класса или инструкции style =. Конечно, вам нужно будет определить класс в вашем файле .css или .less.

<span class="icon-joomla large-icon"> </span>
<span class="icon-joomla" style="font-size:24px;"> </span>

Здесь вы можете увидеть измененный размер Joomla! иконки:  

Доступные Icomoon иконки

Это полный список, включая альтернативные имена для вызова значка. Альтернативные имена идут после '/'.

   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

Добавление в ваш шаблон

Этот раздел является неполным.

Чтобы включить шрифты Icomoon в ваш шаблон, вам нужно будет добавить таблицу стилей CSS (/media/jui/css/icomoon.css) или включить ее в ваш .less файл при создании таблицы стилей .css.

$doc = JFactory::getDocument();
$doc->addStyleSheet($this->baseurl.'/media/jui/css/icomoon.css');