•  

  Иконочный шрифт и таблица иконок с названиями.

  Иконочный шрифт тема давно разжёванная и с эффективностью его применения спорить конечно же здесь никто не будет. Всё понятно - уменьшаем вес и снижаем количество запросов к серверу. В ответ получаем любовь и признание поисковиков.

  По умолчанию в сайтах работающих на CMS Joomla 3.х установлен иконочный шрифт Icomoon, работающий в шаблоне Protostar (для сайта) и в шаблонах админ-панели Isis и Hathor.

Как пользоваться иконочным шрифтом

  Для того чтобы вывести иконку, необходимо прописать код следующей структуры

<i class="icon-name_icon"> </i>

, где name_icon -это имя иконки.

Например, добавим в HTML код

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

отображается вот такая иконка:

Иконки и их названия можно посмотреть ниже в  таблице иконок


Размер и цвет иконок

 Размер и цвет для иконочного шрифта задаётся также как и для обычных шрифтов при помощи классов стилей CSS. Стили которые применяются для иконочного шрифта по умолчанию, прописаны в файле CSS шаблона сайта Protostar. Стили можно менять как для всего класса иконок, так и для каждой иконки отдельности.

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

Получается шрифтовая иконка вот такого размера:

Добавим свойство color и эта же иконка приобретёт цвет:   или вот так

<span style="font-size:24px;color:#0022ff;"><i class="icon-joomla"></i></span>

Из иконки ютуб 

<span style="font-size:60px;color:#e62117;"><i class="icon-youtube"></i></span>

 

      получим:      


Кнопка скачать

<a href="#" class="link"><button class="btn"><i class="icon-download"></i> Скачать</button></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
 
 

Комментарии  

Никола Ивахнов
# Никола Ивахнов 21.12.2016 16:49
А font-avesome? Он так же легко подключается и имеет чуть более удобную систему управления размерами элементом class"vk-icon 2x(3x 4x 6x)"
А в этом иконочнике иконочки несколько стандартные. Олдфаговые так сказать
Ответить | Ответить с цитатой | Цитировать

Добавить комментарий

Для того чтобы ваши комментарии появлялись мгновенно (без модерации), авторизируйтесь или пройдите регистрацию на сайте. Комментарии добавленные анонимно добавляются только после модерации, из-за большого количества спама.

Защитный код
Обновить