Классы иконок
40 новых иконок в версии 4.2
fa-angellist
fa-area-chart
fa-at
fa-bell-slash
fa-bell-slash-o
fa-bicycle
fa-binoculars
fa-birthday-cake
fa-bus
fa-calculator
fa-cc
fa-cc-amex
fa-cc-discover
fa-cc-mastercard
fa-cc-paypal
fa-cc-stripe
fa-cc-visa
fa-copyright
fa-eyedropper
fa-futbol-o
fa-google-wallet
fa-ils
fa-ioxhost
fa-lastfm
fa-lastfm-square
fa-line-chart
fa-meanpath
fa-newspaper-o
fa-paint-brush
fa-paypal
fa-pie-chart
fa-plug
fa-shekel (alias)
fa-sheqel (alias)
fa-slideshare
fa-soccer-ball-o (alias)
fa-toggle-off
fa-toggle-on
fa-trash
fa-tty
fa-twitch
fa-wifi
fa-yelp
Иконки веб-приложений
fa-adjust
fa-anchor
fa-archive
fa-area-chart
fa-arrows
fa-arrows-h
fa-arrows-v
fa-asterisk
fa-at
fa-automobile (alias)
fa-ban
fa-bank (alias)
fa-bar-chart
fa-bar-chart-o (alias)
fa-barcode
fa-bars
fa-beer
fa-bell
fa-bell-o
fa-bell-slash
fa-bell-slash-o
fa-bicycle
fa-binoculars
fa-birthday-cake
fa-bolt
fa-bomb
fa-book
fa-bookmark
fa-bookmark-o
fa-briefcase
fa-bug
fa-building
fa-building-o
fa-bullhorn
fa-bullseye
fa-bus
fa-cab (alias)
fa-calculator
fa-calendar
fa-calendar-o
fa-camera
fa-camera-retro
fa-car
fa-caret-square-o-down
fa-caret-square-o-left
fa-caret-square-o-right
fa-caret-square-o-up
fa-cc
fa-certificate
fa-check
fa-check-circle
fa-check-circle-o
fa-check-square
fa-check-square-o
fa-child
fa-circle
fa-circle-o
fa-circle-o-notch
fa-circle-thin
fa-clock-o
fa-close (alias)
fa-cloud
fa-cloud-download
fa-cloud-upload
fa-code
fa-code-fork
fa-coffee
fa-cog
fa-cogs
fa-comment
fa-comment-o
fa-comments
fa-comments-o
fa-compass
fa-copyright
fa-credit-card
fa-crop
fa-crosshairs
fa-cube
fa-cubes
fa-cutlery
fa-dashboard (alias)
fa-database
fa-desktop
fa-dot-circle-o
fa-download
fa-edit (alias)
fa-ellipsis-h
fa-ellipsis-v
fa-envelope
fa-envelope-o
fa-envelope-square
fa-eraser
fa-exchange
fa-exclamation
fa-exclamation-circle
fa-exclamation-triangle
fa-external-link
fa-external-link-square
fa-eye
fa-eye-slash
fa-eyedropper
fa-fax
fa-female
fa-fighter-jet
fa-file-archive-o
fa-file-audio-o
fa-file-code-o
fa-file-excel-o
fa-file-image-o
fa-file-movie-o (alias)
fa-file-pdf-o
fa-file-photo-o (alias)
fa-file-picture-o (alias)
fa-file-powerpoint-o
fa-file-sound-o (alias)
fa-file-video-o
fa-file-word-o
fa-film
fa-filter
fa-fire
fa-fire-extinguisher
fa-flag
fa-flag-checkered
fa-flag-o
fa-flash (alias)
fa-flask
fa-folder
fa-folder-o
fa-folder-open
fa-folder-open-o
fa-frown-o
fa-futbol-o
fa-gamepad
fa-gavel
fa-gear (alias)
fa-gears (alias)
fa-gift
fa-glass
fa-globe
fa-graduation-cap
fa-group (alias)
fa-hdd-o
fa-headphones
fa-heart
fa-heart-o
fa-history
fa-home
fa-image (alias)
fa-inbox
fa-info
fa-info-circle
fa-institution (alias)
fa-key
fa-keyboard-o
fa-language
fa-laptop
fa-leaf
fa-legal (alias)
fa-lemon-o
fa-level-down
fa-level-up
fa-life-bouy (alias)
fa-life-buoy (alias)
fa-life-ring
fa-life-saver (alias)
fa-lightbulb-o
fa-line-chart
fa-location-arrow
fa-lock
fa-magic
fa-magnet
fa-mail-forward (alias)
fa-mail-reply (alias)
fa-mail-reply-all (alias)
fa-male
fa-map-marker
fa-meh-o
fa-microphone
fa-microphone-slash
fa-minus
fa-minus-circle
fa-minus-square
fa-minus-square-o
fa-mobile
fa-mobile-phone (alias)
fa-money
fa-moon-o
fa-mortar-board (alias)
fa-music
fa-navicon (alias)
fa-newspaper-o
fa-paint-brush
fa-paper-plane
fa-paper-plane-o
fa-paw
fa-pencil
fa-pencil-square
fa-pencil-square-o
fa-phone
fa-phone-square
fa-photo (alias)
fa-picture-o
fa-pie-chart
fa-plane
fa-plug
fa-plus
fa-plus-circle
fa-plus-square
fa-plus-square-o
fa-power-off
fa-print
fa-puzzle-piece
fa-qrcode
fa-question
fa-question-circle
fa-quote-left
fa-quote-right
fa-random
fa-recycle
fa-refresh
fa-remove (alias)
fa-reorder (alias)
fa-reply
fa-reply-all
fa-retweet
fa-road
fa-rocket
fa-rss
fa-rss-square
fa-search
fa-search-minus
fa-search-plus
fa-send (alias)
fa-send-o (alias)
fa-share
fa-share-alt
fa-share-alt-square
fa-share-square
fa-share-square-o
fa-shield
fa-shopping-cart
fa-sign-in
fa-sign-out
fa-signal
fa-sitemap
fa-sliders
fa-smile-o
fa-soccer-ball-o (alias)
fa-sort
fa-sort-alpha-asc
fa-sort-alpha-desc
fa-sort-amount-asc
fa-sort-amount-desc
fa-sort-asc
fa-sort-desc
fa-sort-down (alias)
fa-sort-numeric-asc
fa-sort-numeric-desc
fa-sort-up (alias)
fa-space-shuttle
fa-spinner
fa-spoon
fa-square
fa-square-o
fa-star
fa-star-half
fa-star-half-empty (alias)
fa-star-half-full (alias)
fa-star-half-o
fa-star-o
fa-suitcase
fa-sun-o
fa-support (alias)
fa-tablet
fa-tachometer
fa-tag
fa-tags
fa-tasks
fa-taxi
fa-terminal
fa-thumb-tack
fa-thumbs-down
fa-thumbs-o-down
fa-thumbs-o-up
fa-thumbs-up
fa-ticket
fa-times
fa-times-circle
fa-times-circle-o
fa-tint
fa-toggle-down (alias)
fa-toggle-left (alias)
fa-toggle-off
fa-toggle-on
fa-toggle-right (alias)
fa-toggle-up (alias)
fa-trash
fa-trash-o
fa-tree
fa-trophy
fa-truck
fa-tty
fa-umbrella
fa-university
fa-unlock
fa-unlock-alt
fa-unsorted (alias)
fa-upload
fa-user
fa-users
fa-video-camera
fa-volume-down
fa-volume-off
fa-volume-up
fa-warning (alias)
fa-wheelchair
fa-wifi
fa-wrench
Иконки типов файлов
fa-file
fa-file-archive-o
fa-file-audio-o
fa-file-code-o
fa-file-excel-o
fa-file-image-o
fa-file-movie-o (alias)
fa-file-o
fa-file-pdf-o
fa-file-photo-o (alias)
fa-file-picture-o (alias)
fa-file-powerpoint-o
fa-file-sound-o (alias)
fa-file-text
fa-file-text-o
fa-file-video-o
fa-file-word-o
fa-file-zip-o (alias)
Иконки загрузки
- These icons work great with the
fa-spinclass.
Check out the spinning icons example.
Check out the spinning icons example.fa-circle-o-notch
fa-cog
fa-gear (alias)
fa-refresh
fa-spinner
Иконки элементов формы
fa-check-square
fa-check-square-o
fa-circle
fa-circle-o
fa-dot-circle-o
fa-minus-square
fa-minus-square-o
fa-plus-square
fa-plus-square-o
fa-square
fa-square-o
Иконки способов оплаты
fa-cc-amex
fa-cc-discover
fa-cc-mastercard
fa-cc-paypal
fa-cc-stripe
fa-cc-visa
fa-credit-card
fa-google-wallet
fa-paypal
Иконки диаграмм
fa-area-chart
fa-bar-chart
fa-bar-chart-o (alias)
fa-line-chart
fa-pie-chart
Пиктограммы валют
fa-bitcoin (alias)
fa-btc
fa-cny (alias)
fa-dollar (alias)
fa-eur
fa-euro (alias)
fa-gbp
fa-ils
fa-inr
fa-jpy
fa-krw
fa-money
fa-rmb (alias)
fa-rouble (alias)
fa-rub
fa-ruble (alias)
fa-rupee (alias)
fa-shekel (alias)
fa-sheqel (alias)
fa-try
fa-turkish-lira (alias)
fa-usd
fa-won (alias)
fa-yen (alias)
Пиктограммы редактирования текста
fa-align-center
fa-align-justify
fa-align-left
fa-align-right
fa-bold
fa-chain (alias)
fa-chain-broken
fa-clipboard
fa-columns
fa-copy (alias)
fa-cut (alias)
fa-dedent (alias)
fa-eraser
fa-file
fa-file-o
fa-file-text
fa-file-text-o
fa-files-o
fa-floppy-o
fa-font
fa-header
fa-indent
fa-italic
fa-link
fa-list
fa-list-alt
fa-list-ol
fa-list-ul
fa-outdent
fa-paperclip
fa-paragraph
fa-paste (alias)
fa-repeat
fa-rotate-left (alias)
fa-rotate-right (alias)
fa-save (alias)
fa-scissors
fa-strikethrough
fa-subscript
fa-superscript
fa-table
fa-text-height
fa-text-width
fa-th
fa-th-large
fa-th-list
fa-underline
fa-undo
fa-unlink (alias)
Пиктограммы направлений
fa-angle-double-down
fa-angle-double-left
fa-angle-double-right
fa-angle-double-up
fa-angle-down
fa-angle-left
fa-angle-right
fa-angle-up
fa-arrow-circle-down
fa-arrow-circle-left
fa-arrow-circle-o-down
fa-arrow-circle-o-left
fa-arrow-circle-o-right
fa-arrow-circle-o-up
fa-arrow-circle-right
fa-arrow-circle-up
fa-arrow-down
fa-arrow-left
fa-arrow-right
fa-arrow-up
fa-arrows
fa-arrows-alt
fa-arrows-h
fa-arrows-v
fa-caret-down
fa-caret-left
fa-caret-right
fa-caret-square-o-down
fa-caret-square-o-left
fa-caret-square-o-right
fa-caret-square-o-up
fa-caret-up
fa-chevron-circle-down
fa-chevron-circle-left
fa-chevron-circle-right
fa-chevron-circle-up
fa-chevron-down
fa-chevron-left
fa-chevron-right
fa-chevron-up
fa-hand-o-down
fa-hand-o-left
fa-hand-o-right
fa-hand-o-up
fa-long-arrow-down
fa-long-arrow-left
fa-long-arrow-right
fa-long-arrow-up
fa-toggle-down (alias)
fa-toggle-left (alias)
fa-toggle-right (alias)
fa-toggle-up (alias)
Иконки видеоплеера
fa-arrows-alt
fa-backward
fa-compress
fa-eject
fa-expand
fa-fast-backward
fa-fast-forward
fa-forward
fa-pause
fa-play
fa-play-circle
fa-play-circle-o
fa-step-backward
fa-step-forward
fa-stop
fa-youtube-play
Иконки брендов
fa-adn
fa-android
fa-angellist
fa-apple
fa-behance
fa-behance-square
fa-bitbucket
fa-bitbucket-square
fa-bitcoin (alias)
fa-btc
fa-cc-amex
fa-cc-discover
fa-cc-mastercard
fa-cc-paypal
fa-cc-stripe
fa-cc-visa
fa-codepen
fa-css3
fa-delicious
fa-deviantart
fa-digg
fa-dribbble
fa-dropbox
fa-drupal
fa-empire
fa-facebook
fa-facebook-square
fa-flickr
fa-foursquare
fa-ge (alias)
fa-git
fa-git-square
fa-github
fa-github-alt
fa-github-square
fa-gittip
fa-google
fa-google-plus
fa-google-plus-square
fa-google-wallet
fa-hacker-news
fa-html5
fa-instagram
fa-ioxhost
fa-joomla
fa-jsfiddle
fa-lastfm
fa-lastfm-square
fa-linkedin
fa-linkedin-square
fa-linux
fa-maxcdn
fa-meanpath
fa-openid
fa-pagelines
fa-paypal
fa-pied-piper
fa-pied-piper-alt
fa-pinterest
fa-pinterest-square
fa-qq
fa-ra (alias)
fa-rebel
fa-reddit
fa-reddit-square
fa-renren
fa-share-alt
fa-share-alt-square
fa-skype
fa-slack
fa-slideshare
fa-soundcloud
fa-spotify
fa-stack-exchange
fa-stack-overflow
fa-steam
fa-steam-square
fa-stumbleupon
fa-stumbleupon-circle
fa-tencent-weibo
fa-trello
fa-tumblr
fa-tumblr-square
fa-twitch
fa-twitter
fa-twitter-square
fa-vimeo-square
fa-vine
fa-vk
fa-wechat (alias)
fa-weibo
fa-weixin
fa-windows
fa-wordpress
fa-xing
fa-xing-square
fa-yahoo
fa-yelp
fa-youtube
fa-youtube-play
fa-youtube-square
Медицинские иконки
fa-ambulance
fa-h-square
fa-hospital-o
fa-medkit
fa-plus-square
fa-stethoscope
fa-user-md
fa-wheelchair
Как вставить иконки в пункты меню сайта в Joomla (Шаблон Protostar)
В этой статье рассмотрим, как вставить иконки в пункты меню сайта Joomla, чтобы отображалось не только название, но и рядом с ним была иконка, символизирующая данный пункт меню.
Напомню, что работаю я с шаблоном Protostar. А материал данной статьи затрагивает стили именно этого шаблона. Но, если используется другой шаблон, то не факт, что приведённый ниже рецепт окажется бесполезным. 😉
Постановка задачи
Итак, у нас есть Главное меню сайта, которое мы уже передвинули в шапку сайта и даже придали ему горизонтальное расположение. Выглядит оно так:
В общем, стандартное меню. Но нет в нём индивидуальности, а очень хочется. =)
Поэтому, подглядев на других сайтах, что можно вставлять иконки в пункты меню рядом с их названиями, сделаем это и на нашем сайте.
Менеджер меню. Пункт меню. Вкладка «Параметры ссылки»
Для того, чтобы поменять внешний вид нашего пункта меню нам потребуется админка Joomla, а конкретно Вкладка «Параметры ссылки», которая доступна в «Менеджере меню» при редактировании или создании пункта меню. Работать будем с полем «CSS-класс ссылки» так, как показано на картинке:
- Вставим в поле название иконки, которую нам хочется видеть в пункте меню перед его названием, например,
icon-users - Сразу поставим пробел в поле «Заголовок меню» (чтобы иконка не сливалась с названием пункта меню)
- Сохраним внесённые изменения и посмотрим что получилось
Заголовок пункта меню уползает вниз (располагается не горизонтально, а вертикально)
При просмотре получившегося результата всё выглядит удручающе.
Хотя иконка и появилась в пункте меню, на название пункта меню уползло вниз, вытянувшись в вертикальном расположении по одной букве:
Исправляем ситуацию. Приводим пункт меню в горизонтальный вид.
Пока не понимаю, чем руководствовались создатели шаблона Protostar и почему всплывает такой косяк. Ясно одно: свойству display пункта меню задано значение block, поэтому он поблочно и выводит каждый символ, складывая их один под другим. А нам нужно их вытянуть в строчку, значит значение свойства display должно быть inline.
Для этого нужно внести изменения в файл template.css, который находится в папке шаблона:
./templates/protostar/css/template.css
Править можно с помощью админки Joomla, можно сторонним редактором. Важно что править, а не чем 😉
А править нужно строчку со свойством display пункта меню .nav > li > a, которая у меня в этом файле находится в районе 2910- строки.
Итак,
Было:
.nav > li > a {
display: block;
}Стало:
.nav > li > a {
display: inline;
}Новый вид пунктов меню
После внесения правок в файл template.css шаблона можно насладиться новым (модернизированным) видом Главного меню сайта! =)
Но, что-то мне кажется, что этим дело не кончится и ещё придётся вернуться к этому вопросу, когда появятся вложенные пункты подменю.
P.S.
Как показала практика, меню, с подобными правками начинает хорошо выглядеть только в случае ширины экрана больше 979px. Таковы настройки шаблона Protostar. Если ширина экрана меньше (критично для планшетов и тем более мобильных телефонов), то Главное меню сайта сворачивается сворачивается в одну кнопку и потом разворачивается кликом по ней в виде вертикального списка. И в этом вертикальном списке пункты меню наползают друг на друга.
Можно ковырять шаблон дальше, дополнив нижний отступ каждому пункту меню типа так:
<li>
Но это уже слишком большое вмешательство в задумку дизайнеров шаблона Protostar, и вместо иконок имеет смысл ставить картинки.
Они нормально работают в пунктах меню при display: block; хотя, большое количество картинок увеличит время загрузки картинок (что снова критично для мобильных устройств из-за увеличения количества обращений к серверу).
Тут каждый волен выбирать тот вариант, который ему покажется наиболее приемлемым. Для меня наиболее приемлемым является тот, который минимально касается переработок дизайна в надежде на то, что рано или поздно у дизайнеров и до этого косяка с иконками пунктов меню дойдут руки.
Смотри статью «Как вставить картинки в пункты меню сайта в Joomla».
Заберите ссылку на статью к себе, чтобы потом легко её найти!
Выберите, то, чем пользуетесь чаще всего:
Направляющая для иконок — Класс
| Иконка | Статус | Описание |
|---|---|---|
| Поднять/опустить руку | Пользователи могут поднимать и опускать руку. Как только инструктор вызывает пользователя, его рука автоматически опускается. | Не проверено | Когда пользователь, которого нет в списке, присоединяется к классу, он присоединится как неподтвержденный пользователь. После подтверждения этот значок исчезнет. | Микрофон | Этот значок микрофона позволяет включать и выключать микрофон. | Реакции | Пользователи могут оставлять отзывы и комментарии, которые будут отображаться в списке участников и на их видеопанели. Значок реакции отображается для учащихся в Классе. Учащиеся в Zoom увидят, что это называется «Обратная связь». | Обратная связь | Пользователи могут оставлять отзывы и комментарии, которые будут отображаться в списке участников и на их видеопанели. Значок обратной связи отображается для учащихся в Zoom, участвующих через боковую панель. Пользователи класса увидят, что это называется «Реакции». | Комнаты отдыха | Преподаватели могут открывать комнаты обсуждения, нажав кнопку «Разговор» на нижней панели инструментов. | Видео | Это означает, что ваше видео включено. | Видеостоп | Это означает, что ваше видео выключено. | Пользователь боковой панели | Указывает, что пользователь присоединился из обычного Zoom и использует боковую панель через браузер. | Увеличить Пользователь | Этот значок отображается только для инструкторов, чтобы указать, когда учащиеся присоединяются через обычный Zoom. | Запись | Указывает на возможность записи занятий. Это доступно только инструкторам. | Поделиться экраном | Значок совместного доступа к экрану доступен как преподавателям, так и учащимся. Преподаватели должны будут включить эту опцию, чтобы учащиеся могли делиться своими экранами. | Потерять фокус | Когда пользователь сворачивает приложение «Класс» в классе, преподаватель увидит значок глаза рядом со своим именем в списке участников, указывающий на то, что учащийся потерял фокус. | Золотая звезда | Инструкторы и ассистенты имеют возможность предоставлять пользователям золотые звезды, которые также могут видеть другие пользователи. | Загрузка | Значок загрузки рядом с вашим именем в списке участников будет означать, что вы ожидаете подключения веб-хука. | Зал ожидания | Часы рядом с именем участника указывают на то, что он ожидает выхода из комнаты ожидания. |