Font Awesome Bb Code & its generator interface

Unmaintained Font Awesome Bb Code & its generator interface 1.2.0

No permission to download
Overview FAQ Updates (4) Reviews (1) History Discussion
How to use this Bb Code?
The simplest way is to use the generator interface, if you don't, here's how to use it.

First of all here are the commands supported by this Bb Code:
  • The 369 icons, check their code here: pastebin link
  • The icon size
    1. fa-lg: size +33%
    2. fa-2x: size x2
    3. fa-3x: size x3
    4. fa-4x: size x4
    5. fa-5x: size x5

    Note: Only one size can be used (with a single icon mode)

  • The icon transformation
    • fa-rotate-90: rotation of 90°
    • fa-rotate-180: rotation of 180°
    • fa-rotate-270: rotation of 270°
    • fa-flip-horizontal: honrizontal symmetry
    • fa-flip-vertical: vertical symmetry

    Note: you have to chose between rotation (only 1 can be selected) or the symmetry (both can be enabled at the same time)

  • The icon border/position
    • fa-border: apply a border to the icon
    • pull-right: kind of float right
    • pull-left: kind of float left

    Note: you can't of course select pull-right & pull-left at the same time

  • The stack mode (combine two icons in one)
    • fa-stack: to enable the stack mode
    • fa-stack-1x: normal icon size (apply to the icon)
    • fa-stack-2x: bigger icon size (apply to the icon)
    • fa-inverse: inverse icon standard color (apply icon - doesn't work if a color has been selected)

    Note: read the section about the stack mode

  • Random Font-Awesome options
    • fa-spin: animate the icon with a rotation movement
    • fa-fw: apply a fix width to the icon

  • Hexa/RGB Color
    Apply a color to the icon

  • left/right (default: right)
    Position the text (content) at the left or the right of the icon. The advantage to use a text content is that the text will be wrapped inside the same html tag that the one used by the font-awesome icon. If you need to customize the css class, it can be useful

A few example with a single icon:
Code: 
[fa=fa-camera-retro] text[/fa]
[fa=fa-camera-retro|left]text [/fa]
[fa=fa-camera-retro|left|fa-5x][SIZE=7][B]Text[/B] [/SIZE][/fa]
[SIZE=7][B]Text[/B] [/SIZE][fa=fa-camera-retro|fa-5x][/fa]


How to use the Font-Awesome stack mode?

The Font-Awesome stack mode is a way to combine two icons inside one. To see the available options, please read above.

//To do
Top Bottom