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

Используем различные иконки вместо картинок с помощью шрифта Font Awesome

Различные мануалы, инструкции, видео и прочая документация по работе сайта.

dimassamid
Аватара пользователя
dimassamid
Admin
Admin
Сообщения: 3702
Стаж: 11 лет 5 месяцев
Настоящее имя: Dmitry
Откуда: Estonia, Tallinn
Благодарил (а): 2010 раз
Поблагодарили: 10206 раз
Возраст: 36
Estonia

Сообщение 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
Аватара пользователя
Librina
Ranger
Ranger
Сообщения: 2902
Стаж: 6 лет 8 месяцев
Настоящее имя: Марина
Откуда: Кимры
Благодарил (а): 5010 раз
Поблагодарили: 2618 раз
Возраст: 40
Russia

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

Сообщение Librina » 

Любезный dimassamid! fa-heart
В целях ознакомления наших резидентов с самыми разными возможностями сайта ты предлагаешь им попробовать всё новые опции, способные и разнообразить сообщения, и просто внести сюда что-то реально интересное и милое. В данной инструкции ты подробно рассказал нам обо всех достоинствах использования иконок и о том, как они сумеют помочь при составлении постов. И, пройдя по ссылке на указанный тобой ресурс, я действительно обнаружила там великое множество иконок, и подходящих под любые задачи, и служащих для выражения эмоций, да и просто для передачи нужной информации. Ну, и, разумеется, я видела, как некоторые из них ты продемонстрировал в нашем чате, что меня сначала немного удивило, но потом, после публикации оного указания по шрифту Font Awesome, мне всё стало понятно. Что ж, спасибо тебе и за такое маленькое, но чудесное дополнение для Портала, оно тоже для всех нас необходимо. А вот и первый успешный результат: нажав на соответствующую кнопку с кодом и найдя желанную иконку, я вставила её и вот что у меня получилось: fa-thumbs-up Так что я выражаю тебе глубокую признательность за искреннюю заботу о форуме и пожелаю осуществления всех мечтаний! Любви тебе, добра и Солнца! :sp-ru:
<3 Glory, Glory, SpaceSynth! :rocket:
dimassamid
Аватара пользователя
dimassamid
Admin
Admin
Сообщения: 3702
Стаж: 11 лет 5 месяцев
Настоящее имя: Dmitry
Откуда: Estonia, Tallinn
Благодарил (а): 2010 раз
Поблагодарили: 10206 раз
Возраст: 36
Estonia

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

Сообщение dimassamid » 

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

Вернуться в «Документация по форуму»