Иконочный шрифт тема давно разжёванная и с эффективностью его применения спорить конечно же здесь никто не будет. Всё понятно - уменьшаем вес и снижаем количество запросов к серверу. В ответ получаем любовь и признание поисковиков.
По умолчанию в сайтах работающих на CMS Joomla 3.х установлен иконочный шрифт Icomoon, работающий в шаблоне Protostar (для сайта) и в шаблонах админ-панели Isis и Hathor.
Как пользоваться иконочным шрифтом
Для того чтобы вывести иконку, необходимо прописать код следующей структуры
<i class="icon-name_icon"></i>, где name_icon - это имя иконки.
Например, добавим в HTML код
<i class="icon-joomla"> </i>отображается вот такая иконка:
Иконки и их названия можно посмотреть ниже в таблице иконок
Размер и цвет иконок
Размер и цвет для иконочного шрифта задаётся также как и для обычных шрифтов при помощи классов стилей CSS. Стили которые применяются для иконочного шрифта по умолчанию, прописаны в файле CSS шаблона сайта Protostar. Стили можно менять как для всего класса иконок, так и для каждой иконки отдельности.
Добавлять стили можно инлайново внутри тега i <i style="здесь_стили"></i>
Например зададим для иконки размер 37px
<i class="icon-joomla" style="font-size: 37px;"></i>
Получается шрифтовая иконка вот такого размера:
Добавим свойство color и эта же иконка приобретёт цвет: или вот так
<i class="icon-joomla" style="font-size: 24px; color: #0022ff;"></i>Из иконки ютуб
<i class="icon-youtube" style="font-size: 60px; color: #e62117;"></i>
получим:
Кнопка скачать
<a class="btn btn-primary" href="#" role="button"><i class="icon-download"></i> Скачать</a>где вместо # нужно вставить ссылку
Ссылка с иконкой
<a href="#" class="link"><i class="icon-out-2"> </i> Привет, я ссылка</a>
Подключение иконочного шрифта к шаблону
Чтобы подключить к вашему шаблону иконочный шрифт Icomoon , нужно в файл CSS вашего шаблона дописать стили из файла (/media/jui/css/icomoon.css). Из файла icomoon.css можно полностью скопировать всё содержание и добавить его в файл template.css нужного шаблона.
Так же можно добавить (подключить) в шаблон между тегами <head> </head> следующий код:
$doc = JFactory::getDocument();
$doc->addStyleSheet($this->baseurl.'/media/jui/css/icomoon.css');Иконки иконочного шрифта и их коды
icon-address
icon-apply
icon-edit
icon-pencil
icon-archive
icon-drawer-2
icon-arrow-down-2
icon-arrow-down-3
icon-arrow-down-4
icon-arrow-first
icon-arrow-last
icon-arrow-left-2
icon-arrow-left-3
icon-arrow-left-4
icon-arrow-right-2
icon-arrow-right-3
icon-arrow-right-4
icon-arrow-up-2
icon-arrow-up-3
icon-arrow-up-4
icon-attachment
icon-paperclip
icon-flag-2
icon-backward-2
icon-reply
icon-backward-circle
icon-ban-circle
icon-minus-sign
icon-minus-2
icon-bars
icon-basket
icon-book
icon-bookmark
icon-bookmark-2
icon-box-add
icon-box-remove
icon-briefcase
icon-broadcast
icon-connection
icon-wifi
icon-brush
icon-calendar
icon-calendar-2
icon-calendar-3
icon-camera
icon-camera-2
icon-video
icon-cancel-circle
icon-cart
icon-chart
icon-checkbox-partial
icon-checkbox-unchecked
icon-checkedout
icon-lock
icon-locked
icon-checkin
icon-checkbox
icon-checkbox-checked
icon-checkmark-2
icon-checkmark-circle
icon-chevron-down
icon-downarrow
icon-arrow-down
icon-chevron-left
icon-leftarrow
icon-arrow-left
icon-chevron-right
icon-rightarrow
icon-arrow-right
icon-chevron-up
icon-uparrow
icon-arrow-up
icon-circle
icon-clock
icon-cogs
icon-comment
icon-comments
icon-comments-2
icon-compass
icon-contract
icon-contract-2
icon-credit
icon-credit-2
icon-cube
icon-dashboard
icon-database
icon-delete
icon-remove
icon-cancel-2
icon-download
icon-enter
icon-envelope
icon-mail
icon-envelope-opened
icon-mail-2
icon-equalizer
icon-exit
icon-expand
icon-expand-2
icon-eye-close
icon-eye-blocked
icon-eye-2
icon-eye-open
icon-eye
icon-featured
icon-default
icon-star
icon-feed
icon-file
icon-file-2
icon-file-add
icon-file-plus
icon-file-check
icon-file-remove
icon-file-minus
icon-file-remove
icon-filter
icon-first
icon-flag
icon-flag-3
icon-folder-3
icon-folder-close
icon-folder-2
icon-folder-minus
icon-folder-open
icon-folder
icon-folder-plus
icon-folder-plus-2
icon-folder-remove
icon-forward-2
icon-forward-circle
icon-grid
icon-grid-view
icon-grid-2
icon-grid-view-2
icon-health
icon-heart
icon-heart-2
icon-home
icon-home-2
icon-info
icon-info-2
icon-info-circle
icon-joomla
icon-key
icon-lamp
icon-last
icon-lightning
icon-flash
icon-link
icon-list
icon-list-view
icon-list-2
icon-location
icon-loop
icon-menu
icon-menu-2
icon-menu-3
icon-minus
icon-not-ok
icon-minus-circle
icon-mobile
icon-move
icon-music
icon-new
icon-plus
icon-next
icon-forward
icon-notification
icon-notification-2
icon-notification-circle
icon-options
icon-cog
icon-out-2
icon-new-tab
icon-out-3
icon-new-tab-2
icon-palette
icon-color-palette
icon-paragraph-center
icon-paragraph-justify
icon-paragraph-left
icon-paragraph-right
icon-pause
icon-pause-circle
icon-pencil-2
icon-pending
icon-warning
icon-phone
icon-phone-2
icon-picture
icon-image
icon-pictures
icon-images
icon-pie
icon-pin
icon-pushpin
icon-play
icon-play-2
icon-video-2
icon-youtube
icon-play-circle
icon-plus-circle
icon-power-cord
icon-previous
icon-backward
icon-print
icon-printer
icon-publish
icon-save
icon-ok
icon-checkmark
icon-purge
icon-trash
icon-puzzle
icon-question
icon-question-sign
icon-help
icon-question-2
icon-question-circle
icon-quote
icon-quotes-left
icon-quote-2
icon-quotes-right
icon-quote-3
icon-bubble-quote
icon-radio-checked
icon-generic
icon-radio-unchecked
icon-save-copy
icon-copy
icon-save-new
icon-plus-2
icon-scissors
icon-screen
icon-screwdriver
icon-tools
icon-search
icon-share
icon-redo
icon-share-alt
icon-out
icon-shield
icon-shuffle
icon-signup
icon-smiley
icon-smiley-happy
icon-smiley-2
icon-smiley-happy-2
icon-smiley-neutral
icon-smiley-neutral-2
icon-smiley-sad
icon-smiley-sad-2
icon-square
icon-stack
icon-star-2
icon-stop
icon-stop-circle
icon-support
icon-switch
icon-tablet
icon-tag
icon-tag-2
icon-tags
icon-tags-2
icon-thumbs-down
icon-thumbs-up
icon-tree
icon-tree-2
icon-unarchive
icon-drawer
icon-unblock
icon-refresh
icon-redo-2
icon-undo
icon-undo-2
icon-unfeatured
icon-asterisk
icon-star-empty
icon-unlock
icon-unpublish
icon-cancel
icon-upload
icon-user
icon-users
icon-vcard
icon-wand
icon-warning-2
icon-warning-circle
icon-wrench
icon-zoom-in
icon-zoom-out
*** Авторизируйтесь чтобы писать комментарии.