Инструкция :: Использование иконок в сообщении

[dimassamid]

Инструкция :: Использование иконок в сообщении

---

На нашем сайте встроена библиотека fa-font-awesome Font Awesome, с помощью которой оформлено множество элементов на форуме: меню, различные кнопочки и иконки. Теперь же появилась возможность использовать его и при оформлении ваших сообщений с помощью нового bb-кода [fa]название иконки[/fa].

Что это такое?
Font Awesome — это шрифт с иконками, которые могут добавляться к любым элементам веб-страницы, чтобы повысить их наглядность и улучшить дизайн. Разработчик Дэйв Ганди собрал впечатляющую коллекцию из несколько сотен иконок подходящих под любые задачи.

В чём его преимущество?
Font Awesome позволяет использовать шрифт вместо изображений для самых популярных обозначений, к примеру, иконки электронной почты, платёжных систем, всевозможные галочки, стрелочки и т.д., которые невозможно набрать с помощью символов на клавиатуре. И если раньше для этого приходилось подбирать какие-то графические изображения при оформлении сайта, то с помощью Font Awesome это можно сделать благодаря шрифту, что в свою очередь уменьшает нагрузку на сайт и отображает страницу быстрее. Любая картинка, даже самая маленькая, всё равно имеет вес, что затормаживает браузер при её открытии. Шрифт же подгружается лишь единожды при первом посещении сайта, а потом всегда хранится в кеше вашего браузера, не создавая никакой нагрузки.

Где список всех иконок?
Список всех доступных иконок можно найти на официальном сайте fontawesome.ru, где собрана полная коллекция из 675 иконок. Важно! Мы используем версию 4.7.0, поэтому иконки от 5-й версии не подойдут.

Как вставить эти иконки в моё сообщение?
Для вставки иконки используйте bbcode "fa", внутрь которого поместите название вашей иконки.
Вот так: [fa]название иконки[/fa]

Кнопка с кодом находится здесь:


Ниже в таблице я подобрал несколько примеров.

Пример:	Результат:
[fa]home[/fa]	fa-home
[fa]check[/fa]	fa-check
[fa]facebook[/fa]	fa-facebook
[fa]bandcamp[/fa]	fa-bandcamp
[fa]thumbs-up[/fa]	fa-thumbs-up

После размещения иконки вы можете применять к ней любые другие средства форматирования с помощью других bb-кодов: менять цвет, размер и т.д.

fa-thumbs-up fa-thumbs-up fa-thumbs-up fa-thumbs-up fa-thumbs-up fa-thumbs-up


Как узнать название нужной мне иконки?
Все названия есть на официальном сайте Font Awesome. Переходите по ссылке и выбирайте, что душе угодно:
https://fontawesome.ru/all-icons/
Примечание: скопированное название не должно содержать приставку fa в названии, иначе иконка не отобразится.

Неправильно:

• fa-thumbs-up
• fa fa-thumbs-up

Правильно:

• thumbs-up

---

Остались вопросы? Не стесняйтесь - задавайте.

[Librina]

Любезный dimassamid! fa-heart
В целях ознакомления наших резидентов с самыми разными возможностями сайта ты предлагаешь им попробовать всё новые опции, способные и разнообразить сообщения, и просто внести сюда что-то реально интересное и милое. В данной инструкции ты подробно рассказал нам обо всех достоинствах использования иконок и о том, как они сумеют помочь при составлении постов. И, пройдя по ссылке на указанный тобой ресурс, я действительно обнаружила там великое множество иконок, и подходящих под любые задачи, и служащих для выражения эмоций, да и просто для передачи нужной информации. Ну, и, разумеется, я видела, как некоторые из них ты продемонстрировал в нашем чате, что меня сначала немного удивило, но потом, после публикации оного указания по шрифту Font Awesome, мне всё стало понятно. Что ж, спасибо тебе и за такое маленькое, но чудесное дополнение для Портала, оно тоже для всех нас необходимо. А вот и первый успешный результат: нажав на соответствующую кнопку с кодом и найдя желанную иконку, я вставила её и вот что у меня получилось: fa-thumbs-up Так что я выражаю тебе глубокую признательность за искреннюю заботу о форуме и пожелаю осуществления всех мечтаний! Любви тебе, добра и Солнца!

[dimassamid]

Обновление.

• Кнопка перемещена на первую строку панели инструментов.
• Теперь при клике на кнопку, откроется страница с возможностью выбора иконки. Больше не нужно заходить на сайт разработчика, чтобы узнать название нужного символа.