Font Awesome bb-код [ICON] - шрифты и масштабируемые иконки в векторной графике SVG
 

Font Awesome
Это такой шрифт с иконками вместо букв, в векторной графике SVG, не теряющие качества при масштабировании.

• Названия иконок нужно находить именно здесь.
• Примеры использования
• GitHub Repository - исходники и релизы новых версий на GitHub
• Font Awesome по-русски - Инструкция на русском языке.

Как вставлять иконки в сообщение?

1. Нажимаем в панели ответа кнопку с таким значком https://www.pspx.ru/forum/cleardoc/editor/icon.gif
2. В открывшемся окне опции для BB-кода вписываем название иконки, например fa-address-book
3. Так же доступны дополнительные опции через пробел, смотрите о них в следующих вкладках.

- добавьте опцию fa-lg для увеличения иконки на 33%.
- добавьте опцию fa-2x для увеличения иконки в 2 раза.
- добавьте опцию fa-3x для увеличения иконки в 3 раза.
- добавьте опцию fa-4x для увеличения иконки в 4 раза.
- добавьте опцию fa-5x для увеличения иконки в 5 раз.
- иконки можно увеличивать, обрамляя их обычным ББ-кодом размера [SIZE], показан размер 0, 3, 4, 5, 6, 7.

Добавьте опцию fa-border для обрамления иконки бордюром.
Добавьте опцию fa-pull-right или fa-pull-left для обтекания иконки текстом справа или слева.


…Душа моя озарена неземной радостью,
как эти чудесные весенние утра,
которыми я наслаждаюсь от всего сердца…
Я совсем один и блаженствую в здешнем краю,
словно созданном для таких, как я.

• - добавьте опцию fa-pulse, чтобы заставить пульсировать иконку по 8 шагов.
• - добавьте опцию fa-spin, чтобы заставить вращаться любую иконку.
• - добавьте опцию fa-fw, чтобы задать фиксированную ширину для их выравнивания.
• - пример иконки с опциями: fa-cog fa-spin fa-fw

Чтобы произвольно поворачивать иконки, используйте опции fa-rotate-90 (180/270) и fa-flip-vertical (horizontal).

• - просто нормальная иконка.
• fa-rotate-90 - поворот на 90 градусов.
• fa-rotate-180 - поворот на 180 градусов.
• fa-rotate-270 - поворот на 270 градусов.
• fa-flip-vertical - отражение по вертикали.
• fa-flip-horizontal - отражение по горизонтали.

Иконки так же можно закрашивать цветом, обрамляя их обычным ББ-кодом цвета [COLOR].
Чтобы сделать группу из иконок, используйте опцию fa-stack для родителя, опцию fa-stack-1x используйте для задания стандартного размера иконки, а опцию fa-stack-2x для увеличенного. Опция fa-inverse может быть использована для инверсирования цветов иконок. Так же, вы можете использовать опции увеличения для управления размерами иконок.

- иконка fa-twitter накладывается поверх иконки fa-square-o
- иконка fa-flag накладывается поверх иконки fa-circle
- иконка fa-terminal накладывается поверх иконки fa-square
- иконка fa-ban накладывается поверх иконки fa-camera

Как подключаются шрифты? Они берутся вот отсюда: https://fonts.google.com/

1. Идём за веб-шрифтами на https://fonts.google.com, на выбранном шрифте нажимаем сверху кнопку .
   Он добавляется в панель выбранных, которая появляется на странице внизу. Можно добавлять несколько шрифтов.
2. Открываем панель, переходим на вкладку CUSTOMIZE и там выбираем только нужные параметры.
   Нам нужны regular 400 (стандартная толщина) и Cyrillic (если кириллица поддерживается шрифтом).
3. Возвращаемся обратно на вкладку Embed и забираем ссылку из вкладки @IMPORT (между тегами <style></style>).
4. Теперь нажимаем в панели расширенного редактирования иконку стиля https://www.pspx.ru/forum/cleardoc/editor/css.gif и вставляем этот код между тегами.
   Теперь в сообщении можно любой текст обрамлять этим шрифтом через BB-код Шрифты [FONT="Имя шрифта"]Текст[/FONT]

Пример:

[style]@import url('https://fonts.googleapis.com/css?family=Lobster|Audiowide|Great+Vibes|Rochester')[/style]
Подключён гугль шрифт Lobster
…Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца… Я совсем один и блаженствую в здешнем краю, словно созданном для таких, как я.

Подключён гугль шрифт Audiowide
A red flair silhouetted the jagged edge of a wing. Waves flung themselves at the blue evening. A shining crescent far beneath the flying vessel. It was going to be a lonely trip back.

Подключён гугль шрифт Rochester
A red flair silhouetted the jagged edge of a wing. Waves flung themselves at the blue evening. A shining crescent far beneath the flying vessel. It was going to be a lonely trip back.

Подключён гугль шрифт Great Vibes
A red flair silhouetted the jagged edge of a wing. Waves flung themselves at the blue evening. A shining crescent far beneath the flying vessel. It was going to be a lonely trip back.

Шрифты:

Westral Fonts
Все шрифты папки https://www.pspx.ru/forum/Fonts

1. Kelly Slab
   
   [style]@font-face {font-family: 'Kelly Slab'; font-style: normal; font-weight: 400; src: local('Kelly Slab'), local('KellySlab-Regular'), url('Fonts/Kelly Slab.woff2') format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}[/style]
   Kelly Slab
   
   
2. Merriweather
   
   [style]@font-face {font-family: 'Merriweather'; font-style: normal; font-weight: 400; src: local('Merriweather Regular'), local('Merriweather-Regular'), url('Fonts/Merriweather.woff2') format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}[/style]
   Merriweather
   
   
3. Roboto
   
   [style]@font-face {font-family: 'Roboto'; font-style: normal; font-weight: 400; src: local('Roboto'), local('Roboto-Regular'), url('Fonts/Roboto.woff2') format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}[/style]
   Roboto
   
   
4. Roboto Condensed
   
   [style]@font-face {font-family: 'Roboto Condensed'; font-style: normal; font-weight: 400; src: local('Roboto Condensed'), local('RobotoCondensed-Regular'), url('Fonts/Roboto Condensed.woff2') format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}[/style]
   Roboto Condensed
   
   
5. Roboto Mono
   
   [style]@font-face {font-family: 'Roboto Mono'; font-style: normal; font-weight: 400; src: local('Roboto Mono'), local('RobotoMono-Regular'), url('Fonts/Roboto Mono.woff2') format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}[/style]
   Roboto Mono
   
   
6. Android KG
   
   [style]@font-face {font-family: 'Android'; src: url('Fonts/Android KG.ttf')}[/style]
   Android KG
   
   
7. SNES by Westral Fonts
   
   [style]@font-face {font-family: 'SNES'; src: url('Fonts/SNES Italic.ttf')}[/style]
   SUPER NINTENDO
   
   
8. Slim Play by Westral Fonts
   
   [style]@font-face {font-family: 'Slim Play'; src: url('Fonts/Slim Play.ttf')}[/style]
   PS3 PS4
   
   
9. Nintender by Westral Fonts
   
   [style]@font-face {font-family: 'Nintender'; src: url('Fonts/Nintender (WIP).ttf')}[/style]
   Nintender
   
   
10. EA Logo by Westral Fonts
    
    [style]@font-face {font-family: 'EA Logo'; src: url('Fonts/EA Logo.ttf')}[/style]
    EA
    
    
11. Progress by Westral Fonts
    
    [style]@font-face {font-family: 'Progress'; src: url('Fonts/Progress Bold Italic.ttf')}[/style]
    PROGRESSIVE
    
    
12. Cubic Game by Westral Fonts
    
    [style]@font-face {font-family: 'Cubic Game'; src: url('Fonts/Cubic Game.ttf')}[/style]
    CUBIC GAME
    
    
13. Blue Players by Westral Fonts
    
    [style]@font-face {font-family: 'Blue Players'; src: url('Fonts/Blue Players.ttf')}[/style]
    PS2
    
    
14. XBold by Westral Fonts
    
    [style]@font-face {font-family: 'XBold'; src: url('Fonts/XBold.ttf')}[/style]
    XBOX
    
    
15. HTF Logo by Westral Fonts
    
    [style]@font-face {font-family: 'HTF Logo'; src: url('Fonts/HTF Logo.ttf')}[/style]
    HAPPY TREE FRIENDS
    
    
16. Big Orange by Westral Fonts
    
    [style]@font-face {font-family: 'Big Orange'; src: url('Fonts/Big Orange.ttf')}[/style]
    BIG ORANGE
    
    
17. NES Logo by Westral Fonts
    
    [style]@font-face {font-family: 'NES Logo'; src: url('Fonts/NES-Logo.ttf')}[/style]
    NES
    
    
18. MTV by Westral Fonts
    
    [style]@font-face {font-family: 'MTV'; src: url('Fonts/MTV.ttf')}[/style]
    MTV
    
    
19. YG Edged by Westral Fonts
    
    [style]@font-face {font-family: 'YG Edged'; src: url('Fonts/YG Edged.ttf')}[/style]
    YG Edged
    
    
20. Ross by Westral Fonts
    
    [style]@font-face {font-family: 'Ross'; src: url('Fonts/Ross.ttf')}[/style]
    ROSS
    
    
21. Har Filled Nights by Westral Fonts
    
    [style]@font-face {font-family: 'Har Filled Nights'; src: url('Fonts/Har Filled Nights Bold.ttf')}[/style]
    HAR HAR HAR
    
    
22. Jet Bradley by Westral Fonts
    
    [style]@font-face {font-family: 'Jet Bradley'; src: url('Fonts/Jet-Bradley.ttf')}[/style]
    Jet Bradley
    
    
23. Broderbund Old by Westral Fonts
    
    [style]@font-face {font-family: 'Broderbund'; src: url('Fonts/Broderbund Old Bold.ttf')}[/style]
    Broderbund
    
    
24. PP-Kant by Westral Fonts
    
    [style]@font-face {font-family: 'PP-Kant'; src: url('Fonts/PP-Kant.ttf')}[/style]
    TOONAMI 2004
    
    
25. History by Westral Fonts
    
    [style]@font-face {font-family: 'History'; src: url('Fonts/History.ttf')}[/style]
    History
    
    
26. 629Toonami by Westral Fonts
    
    [style]@font-face {font-family: 'Too-nami'; src: url('Fonts/629Toonami.ttf')}[/style]
    629 TOONAMI
    
    
27. BBC II! by Westral Fonts
    
    [style]@font-face {font-family: 'BBC'; src: url('Fonts/BBC II!.ttf')}[/style]
    BBC II!
    
    
28. EMEN Lowercase by Westral Fonts
    
    [style]@font-face {font-family: 'EMEN Lowercase'; src: url('Fonts/EMEN Lowercase.ttf')}[/style]
    EMEN Lowercase
    
    
29. DLE Comic Lowercase by Westral Fonts
    
    [style]@font-face {font-family: 'DLE Comic Lowercase'; src: url('Fonts/DLE Comic Lowercase.ttf')}[/style]
    DLE Comic Lowercase
    
    
30. HP Slant by Westral Fonts
    
    [style]@font-face {font-family: 'HP Slant'; src: url('Fonts/HP-Slant.ttf')}[/style]
    HP Slant
    
    
31. Toonami 99 by Westral Fonts
    
    [style]@font-face {font-family: 'Toonami'; src: url('Fonts/Toonami 99.ttf')}[/style]
    Toonami 99
    
    
32. G4 2004 by Westral Fonts
    
    [style]@font-face {font-family: 'G4'; src: url('Fonts/G4 2004.ttf')}[/style]
    G4 2004
    
    
33. God of War
    
    [style]@font-face {font-family: 'GodOfWarRussian'; src: url('attachment.php?attachmentid=16628')}[/style]
    God of War: Восхождение

Несколько сервисов по распознаванию шрифтов с картинок: 1 2 3 Расширение

снежок крутим копирайт :) мячик история

звездочка суперсилы погода стрелочки

Любой символ можно крутить, но красиво смотрятся симметричные иконки. (fa-fw - необязательный параметр)

Думаю взять картинку что-то из этих https://www.google.ru/search?q=Font+Awesome&newwindow=1 Там логотип его с флагом. Давай в новую тему перенесём, т.к. эти картинки идут отдельным бб-кодом.

Как подключаются шрифты. Они берутся вот отсюда: https://fonts.google.com/

…Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца… Я совсем один и блаженствую в здешнем краю, словно созданном для таких, как я.

A red flair silhouetted the jagged edge of a wing. Waves flung themselves at the blue evening. A shining crescent far beneath the flying vessel. It was going to be a lonely trip back.

A red flair silhouetted the jagged edge of a wing. Waves flung themselves at the blue evening. A shining crescent far beneath the flying vessel. It was going to be a lonely trip back.

A red flair silhouetted the jagged edge of a wing. Waves flung themselves at the blue evening. A shining crescent far beneath the flying vessel. It was going to be a lonely trip back.

Ок.
Добавь синтаксиса в шапку. Ты еще забыл в анимированном пульсирующий:
[icon="fa-spinner fa-pulse fa-3x fa-fw"][/icon]

Про рейтинг: вот еще тут можно посмотреть

Такой шрифт найдем или импортируем?

Вообще неплохое семейство.

Тоже немного помучился :) Смотри в шапке "Шрифты".

Синтаксис HTML:
PlayStation 3

ErikPshat, может добавим их в панель шрифтов (те что в меню панели)?

in1975, да не, и эти уже грузят форум. Там десяток килобайт, там десяток, стили и всякие скрипты, итого накапливается много. Даже не просто по весу, а по их отклику и ожиданию прогрузки.

ErikPshat, ок, будем юзать так.

Всё правильно, Еркен, на форуме не так много людей вообще шрифты меняют. В основном в шаблонах тем.

Оформительством в основном я балуюсь :blush:. Мне не сложно скопировать нужный синтаксис :)

Короче, добавил в шрифты на форум пока 2 штуки: PlayStation, EA Logo

Удалил из списка шрифтов лишние, которые в принципе не лежат на форуме, а это стандартные шрифты из Виндового набора:

• Arial Narrow
• Calibri
• Georgia
• Palatino Linotype
• Tahoma

Нет, пока оставил, ибо пустое место плохо смотрится.
В сообщениях форума желательно убрать добавленные стили этих шрифтов. Иначе, при просмотре информации о юзере, отображается, якобы он смотрит тему "Font Awesome" в админке.

P.S. Какие ещё добавить часто используемые?

ErikPshat, Xbox, Nintender, MTV

ОК, добавил: MTV, Nintender, Xbox.

Просто размер у них небольшой:

• EA Logo.ttf (5.5 Кб)
• MTV.ttf (8.4 Кб)
• Nintender (WIP).ttf (16.9 Кб)
• Slim Play.ttf (10.6 Кб)
• XBold.ttf (8.4 Кб)

Для сравнения, один Roboto весит наверное 500КБ.

Кстати, для информации: Apple использовала набор шрифтов Helvetica в качестве системного шрифта для iOS с момента выпуска первого iPhone. Они также заменили им Lucida Grande в Mac OS X, начиная с версии 10.10 Yosemite. Так iOS 9 стал официально доступен для всех, и новое семейство шрифтов под названием San Francisco ненавязчиво заменило Helvetica Neue.

Также наткнулся на шрифты андроид, вот еще, и еще

in1975, и что ты хочешь этим сказать?

ErikPshat, кому-то в соответствующих разделах может пригодиться ;) Особенно мне понравился этот шрифт.

Вот здесь случайно заметил прикольными кириллическими шрифтами текст написан: http://nd.ru/sniper/
Шрифты необычные и названия странные, видимо сами рисовали или по лицензии где-то брали.
Можно стырить, они лежат у них же на сервере:

• http://nd.ru/sniper/fonts/fonts.css
• http://nd.ru/sniper/fonts/fonts2.css

http://nd.ru/sniper/fonts/fonts/bgt65c.ttf
http://nd.ru/sniper/fonts/fonts/newfacdm.ttf
http://nd.ru/sniper/fonts/fonts/newfacbl.ttf
http://nd.ru/sniper/fonts/fonts/bgt45c.ttf

А вот здесь Webfont Generator.
Туда можно загрузить любой шрифт и на выходе получить букет во всяких форматах и с HTML-страницей с демонстрацией как выглядит шрифт в разных ракурсах.

ErikPshat, последние 2 мне понравились.

Вышла 5 версия.

Иконки.

ErikPshat, дополнительные шрифты вижу во вложении. А сам Font Awesome v4.7 куда залил? Хочу версию 5.0.8 добавить и чтобы все в 1 месте было.

in1975, ну так в хейдере где-то.
Так они не совместимы. Там разный код.

ErikPshat, ну там отличия в синтаксисе минимальны far вместо fa. Просто ссылка на иконки ведет на 5 версию, нехорошо как-то

in1975, в смысле? Ссылка на иконки ведёт на свою версию. А fav - это уже другая история. Или у тебя есть какой-то выход, чтобы поддерживать и 4-ую версию и 5-ую?

Можно наверное через Java сделать условие, типа

http://fontawesome.io/icons

Блин, там везде разный синтаксис :(

Хочу такую иконку. А можно и все от 5й версии :)

in1975, надо бы вспоминать как мы тогда прикрутили 4-ую версию :) Ну и прикрутить 5-ую.

• Вышло обновление до Font Awesome v5.2.
• Здесь инструкция по использованию - How to Use
• На той странице есть ссылка по апгрейду с версии 4 на версию 5 - Upgrading from Version 4

Это на заметку. Как будет время, надо бы реализовать переход на версию 5.

ErikPshat, как процесс идет? Вижу, что ты уже хитро юзаешь их, но не расписал что и как :)

in1975, да нет, я же юзаю иконки версии 4. С новой пока не возился. У 5-ой версии иконки имеют навзвание fas или fab или как-то так из 3-ёх букв.

in1975, видимо ты ту иконку залил куда-то во вложение, а потом кто-то удалил вложение или само сообщение :)

in1975, короче, убираю все эти шрифты из шаблона форума headinclude:
Ибо используются очень редко, в единичных случаях и баловство всё это.
А форум тормозят и мне надоело наблюдать в профилях пользователей, как будто они смотрят тему FontAwesome.

Ещё такая строчка есть, её пока оставляю:
Надоело наблюдать почти у всех юзеров в профиле вот такую картину:

Вложение 15057

ErikPshat, Шрифт плейстейшн я постоянно пользую.

А хбокс шрифт в разделе хбокс красиво смотрится. А ЕА лого ты и сам использовал!

Злой ты :cray:

in1975, да уже надоело у всех в профиле наблюдать "Смотрит вложение Font Awesome bb-код [ICON]" вместо настоящей темы.

ErikPshat, а зачем тебе эта информация? кто что смотрит... Или товарищ полковник хочет все контролировать? ;)

Шрифты - нужная дизайнерская вещь, а вот то о чем ты говоришь - ненужная фича...

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

Если тебе так важно отображать в теме эти шрифты, тогда залей их во вложение и выведи через STYLE.
Я не вижу в этом что-то особо важное, потому что это используется буквально в нескольких постах, а не во всех темах форума. И ради этого украшательства не вижу смысла терять другую функциональность.

Либо, нужно найти лазейку, чтобы залить эти шрифты в папки форума, а не во вложение.

in1975, пилиять, снова такая фигня https://i2.imageban.ru/out/2018/10/2...53a8ec7389.png

Ну я же говорил, не надо ссылки кидать на тему в админке во вложение. Заливай файл шрифта в ту тему, где его используешь. Хотя тут и положительный момент есть - по ссылке сразу попадаешь в эту тему :D

Не очень мудрое решение. Мы так весь HDD засрем.

in1975, а что тогда делать, другого решения не вижу. А урезать админский функционал вообще не вижу резона и тебя, как админа, это должно в первую очередь волновать, а не выделение особым шрифтом одного слова SONY во всей теме, куда подгружается шрифт.

Ну я написал в личку viper с просьбой залить архив в корень форума, архив в шапке подготовил.
Не знаю, когда он его прочтёт и соизволит ли выполнить просьбу.