ExBB Community ExBB Community
 Сайт проекта ExBB Общение объединяет!
Войдите на форум при помощиВойти через loginza
 		 Чат на форуме      Помощь      Поиск      Пользователи     BanList BanList


 Страниц (1): [1]   

> Описание: Инструкция по подключению иконочного шрифта на форум
Поиск в теме | Версия для печати
WolfGeeN
Отправлено: 21 января 2018 — 15:12
Post Id



Пользователь
Newbie


Покинул форум
Сообщений всего: 27
Дата рег-ции: Март 2015  
Откуда: Russia
Репутация: 2




 Поделюсь инструкцией по подключению FA к форуму, может будет кому-нибудь полезна. Закатив глазки
На мой взгляд это достойная замена иконкам-изображениям.1

Font-awesome - это иконочный шрифт, который содержит в себе более 650 иконок.
Преимущество использования иконочного шрифта над изображениями, в масштабировании иконок без потери качества при любом увеличении (обычно изображения, если только они не прилично большо́го разрешения, при масштабе расплываются) и отсутствие нагрузки при загружении страницы.
Подключить font awesome на форум можно 2 путями- скопировав папку со шрифтами на свой форум или через CDN, путем добавления одной единственной ссылки. В этом случае шрифт не будет занимать место на вашем сервере, но в случае неполадок с сайтом, на котором расположен font awesome, иконки перестанут отображаться и у вас.
Поэтому лично я рекомендую не жалеть этих полутора мегабайт, а скачать и загрузить шрифт к себе.
Инструкция по подключению шрифта.

Скрытый текст:
Для просмотра Вам необходимо авторизоваться




(Добавление)

Использование font-awesome на форуме

Самое простое использование font awesome - напрямую html тегом.
Для этого открываем ссылку на список иконок ссылка, находим понравившуюся и кликаем по ней.

Далее мы видим теги для задействования иконки. Например иконка рупора - "[icon]bullhorn[/icon]" имеет следующий код:

CODE:
<i class="fa fa-bullhorn" aria-hidden="true"></i>


Если нам нужно использовать иконку большего размера, то к классу добавляется fa-2x. Цифру 2 можно заменить на большую, для еще большего увеличения масштаба иконки.



Пример иконки с максимальным масштабом:

CODE:
<i class="fa fa-bullhorn fa-5x" aria-hidden="true"></i>


Иконки можно также подключать используя css - через content, before и after.
Пример подключения иконки перед элементом, через before

CODE:
.myclass:before { font-family: FontAwesome; content: "\f095"; }.


При этом название иконки заменяется на ее код - f095.
Код каждой иконки можно увидеть при ее детальном просмотре на сайте:



Также иконки можно поворачивать, анимировать, накладывать друг на друга и много другое. Об этом, вместе с примерами использования, вы можете почитать тут - ссылка.

(Отредактировано автором: 21 января 2018 — 15:14)
 
 


Parapsixolog
Отправлено: 18 февраля 2018 — 15:33
Post Id



Пользователь
Advanced Member


Покинул форум
Сообщений всего: 489
Дата рег-ции: Сент. 2011  
Репутация: 14




 Опять же нет картинок, и оценить данное дополнение без них весьма сложно
 
 
WolfGeeN
Отправлено: 18 февраля 2018 — 17:34
Post Id



Пользователь
Newbie


Покинул форум
Сообщений всего: 27
Дата рег-ции: Март 2015  
Откуда: Russia
Репутация: 2




 К сожалению я не могу исправить сообщение, поэтому приложу иллюстрации к этому посту.
Я перезалила изображения на нейтральный хостинг.





Код иконок для css



Масштаб иконок



Иконки, добавленные в форму ответа, для использования их в сообщениях форума
 
 
Поиск в теме | Версия для печати
Страниц (1): [1]
Сейчас эту тему просматривают: 1 (гостей: 1, зарегистрированных: 0)
« Модификации и дополнения »

> Похожие темы: Подключение Font Awesome к форуму
Темы Форум Информация о теме Обновление
А если С Чужого компьютера?!
Если человек с чужого компа на форум зашел		Уязвимости Ответов: 8
Автор темы: sergan		8 ноября 2009 — 14:28
Автор: sergan
Could not write in the file forum1/_f_track.php
Установил форум на наш сервер, вылезло Could not write in the file forum1/_f_track.php		Решение проблем Ответов: 4
Автор темы: Konstantin		20 июня 2011 — 07:40
Автор: electron
Не считает темы и сообщения
После перемешения подфорумов в другой форум по статистике 0		Решение проблем Ответов: 4
Автор темы: shyuser		28 сентября 2010 — 20:34
Автор: yura3d
Не работает админпанель
Установил последнюю версию форума. Не работает админпанель		Решение проблем Ответов: 9
Автор темы: FlyRus		2 июня 2013 — 18:08
Автор: electron
Отображение списка online
Как отобразить список участников online на каждой странице форума		Обсуждение Ответов: 5
Автор темы: Марта		9 февраля 2010 — 22:09
Автор: yura3d
 



Все гости форума могут просматривать этот раздел.
Только администраторы и модераторы могут создавать новые темы в этом разделе.
Только администраторы и модераторы могут отвечать на сообщения в этом разделе.
  




Яндекс.Метрика   

Powered by ExBB
ExBB FM 1.0 RC1 by TvoyWeb.ru
InvisionExBB Style converted by Markus®
[Script Execution time: 0.1144]     [ ]