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

[ErikPshat]

Font Awesome v4.7

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

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

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

1. Нажимаем в панели ответа кнопку с таким значком
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. Теперь нажимаем в панели расширенного редактирования иконку стиля и вставляем этот код между тегами.
   Теперь в сообщении можно любой текст обрамлять этим шрифтом через 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 Расширение

[in1975]

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

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

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

[ErikPshat]

Сообщение от in1975 Сделаешь ббкод с выбором иконки (аналогично смайликам)?

Думаю взять картинку что-то из этих 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.

Подробнее о шрифтах

Шрифты подразделяются на несколько категорий:

• Serif - переводится как "Засечки". Обычно это перпендикулярный штрих на краях букв, но могут быть разной формы. Согласно общепринятому мнению, засечки направляют движение глаз вдоль строк при чтении крупных массивов печатного текста. Oни способствуют связи букв в единую линию, облегчая визуальное восприятие и удобочитаемость текста.
  
  
• Sans Serif - переводится как "Без засечек", ру́бленый шрифт. По другому его называют "Гроте́ск", от американского варианта "gothic type" — «готический шрифт». Гротески имеют строгие геометрические формы букв, как бы обрубленный античный вид.
  
  
• Display - нововведение классификации Google, это акцидентные шрифты, предназначенные для набора титульных листов, ярлыков, афиш, плакатов, а также для шрифтовых выделений и т.п..
  
  
• Handwriting - Рукописный шрифт, применяются для имитации рукописи, в зависимости от пишущего инструмента, имитирующие письмо ширококонечным пером, остроконечным пером, кистью и другими инструментами (карандаш, маркер, шариковая ручка и т.д.)
  
  
• Monospace - Моноширинный шрифт, все знаки которого имеют одинаковую ширину, обычно применяется для выравнивания строк.

Помимо этих веб-шрифтов, так же можно указывать стандартные названия шрифтов Windows, как Arial, Arial Narrow, Arial Black, Georgia, Lucida Console, Monospace, Palatino Linotype, Serif, Sans-Serif, Tahoma, Verdana и т.д.. Они будут автоматически подхватываться на компьютере пользователя, если они установлены в системе. Но если вдруг у пользователя не окажется указанного шрифта, будет отображаться шрифт по умолчанию, обычно Serif. А в указании размера допустимо использование увеличения +1, +2, +3 и т.д., например [FONT="+1"] - увеличение на единицу от стандартного значения.

Примеры веб-шрифтов:

Я выбрал для форума набор из популярных шрифтов и добавил их сразу в шаблон стилей форума.

• Merriweather
• Roboto
• Roboto Condenced
• Roboto Mono
• Open Sans
• Kelly Slab

Merriweather
Помимо этих веб-шрифтов, так же можно указывать стандартные названия шрифтов Windows, как Arial, Arial Narrow, Arial Black, Georgia, Lucida Console, Monospace, Palatino Linotype, Serif, Sans-Serif, Tahoma, Verdana и т.д.. Они будут автоматически подхватываться на компьютере пользователя, если они установлены в системе. Но если вдруг у пользователя не окажется указанного шрифта, будет отображаться шрифт по умолчанию, обычно Serif. А в указании размера допустимо использование увеличения +1, +2, +3 и т.д., например [FONT="+1"] - увеличение на единицу от стандартного значения.

Roboto
Помимо этих веб-шрифтов, так же можно указывать стандартные названия шрифтов Windows, как Arial, Arial Narrow, Arial Black, Georgia, Lucida Console, Monospace, Palatino Linotype, Serif, Sans-Serif, Tahoma, Verdana и т.д.. Они будут автоматически подхватываться на компьютере пользователя, если они установлены в системе. Но если вдруг у пользователя не окажется указанного шрифта, будет отображаться шрифт по умолчанию, обычно Serif. А в указании размера допустимо использование увеличения +1, +2, +3 и т.д., например [FONT="+1"] - увеличение на единицу от стандартного значения.

Roboto Condensed
Помимо этих веб-шрифтов, так же можно указывать стандартные названия шрифтов Windows, как Arial, Arial Narrow, Arial Black, Georgia, Lucida Console, Monospace, Palatino Linotype, Serif, Sans-Serif, Tahoma, Verdana и т.д.. Они будут автоматически подхватываться на компьютере пользователя, если они установлены в системе. Но если вдруг у пользователя не окажется указанного шрифта, будет отображаться шрифт по умолчанию, обычно Serif. А в указании размера допустимо использование увеличения +1, +2, +3 и т.д., например [FONT="+1"] - увеличение на единицу от стандартного значения.

Roboto Mono
Помимо этих веб-шрифтов, так же можно указывать стандартные названия шрифтов Windows, как Arial, Arial Narrow, Arial Black, Georgia, Lucida Console, Monospace, Palatino Linotype, Serif, Sans-Serif, Tahoma, Verdana и т.д.. Они будут автоматически подхватываться на компьютере пользователя, если они установлены в системе. Но если вдруг у пользователя не окажется указанного шрифта, будет отображаться шрифт по умолчанию, обычно Serif. А в указании размера допустимо использование увеличения +1, +2, +3 и т.д., например [FONT="+1"] - увеличение на единицу от стандартного значения.

Monospace
Помимо этих веб-шрифтов, так же можно указывать стандартные названия шрифтов Windows, как Arial, Arial Narrow, Arial Black, Georgia, Lucida Console, Monospace, Palatino Linotype, Serif, Sans-Serif, Tahoma, Verdana и т.д.. Они будут автоматически подхватываться на компьютере пользователя, если они установлены в системе. Но если вдруг у пользователя не окажется указанного шрифта, будет отображаться шрифт по умолчанию, обычно Serif. А в указании размера допустимо использование увеличения +1, +2, +3 и т.д., например [FONT="+1"] - увеличение на единицу от стандартного значения.

Open Sans
Помимо этих веб-шрифтов, так же можно указывать стандартные названия шрифтов Windows, как Arial, Arial Narrow, Arial Black, Georgia, Lucida Console, Monospace, Palatino Linotype, Serif, Sans-Serif, Tahoma, Verdana и т.д.. Они будут автоматически подхватываться на компьютере пользователя, если они установлены в системе. Но если вдруг у пользователя не окажется указанного шрифта, будет отображаться шрифт по умолчанию, обычно Serif. А в указании размера допустимо использование увеличения +1, +2, +3 и т.д., например [FONT="+1"] - увеличение на единицу от стандартного значения.

Kelly Slab
Помимо этих веб-шрифтов, так же можно указывать стандартные названия шрифтов Windows, как Arial, Arial Narrow, Arial Black, Georgia, Lucida Console, Monospace, Palatino Linotype, Serif, Sans-Serif, Tahoma, Verdana и т.д.. Они будут автоматически подхватываться на компьютере пользователя, если они установлены в системе. Но если вдруг у пользователя не окажется указанного шрифта, будет отображаться шрифт по умолчанию, обычно Serif. А в указании размера допустимо использование увеличения +1, +2, +3 и т.д., например [FONT="+1"] - увеличение на единицу от стандартного значения.

[in1975]

Сообщение от ErikPshat Там логотип его с флагом.

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

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

[in1975]

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

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

[ErikPshat]

Сообщение от in1975 Не выходит...

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

Синтаксис HTML:

<style>
@font-face {
font-family: 'Твоё название';
src: url('ссылка');
}
</style>

PlayStation 3

[in1975]

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

[ErikPshat]

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

[in1975]

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

[vash]

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

[in1975]

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

[ErikPshat]

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

@font-face {
 font-family: 'PlayStation';
 src: url('attachment.php?attachmentid=13453')
}

@font-face {
 font-family: 'EA Logo';
 src: url('attachment.php?attachmentid=13439')
}

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

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

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

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

[in1975]

ErikPshat, Xbox, Nintender, MTV

[ErikPshat]

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

@font-face {
 font-family: 'MTV';
 src: url('attachment.php?attachmentid=13447')
}
 @font-face {
font-family: 'Nintender';
 src: url('attachment.php?attachmentid=13449')
}
@font-face {
 font-family: 'Xbox';
 src: url('attachment.php?attachmentid=13456')
}

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

• 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КБ.

[in1975]

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

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

[ErikPshat]

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

[in1975]

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

[ErikPshat]

Ну практического применения в письме никакого не вижу, разве что только в разделе Андроид.

Пока только в шапку добавил.

[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-страницей с демонстрацией как выглядит шрифт в разных ракурсах.

[in1975]

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