Additions to @Antoine FA BBcode Extension (More icons!)

I added Typicons to @Antoine FontAwesome BBcode extension.

First:
Add this code to your custom header:

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/typicons/2.0.8/typicons.css' />

Next:
Add this code to your custom CSS:

@font-face {
  font-family: 'typicons';
  src: url("https://cdnjs.cloudflare.com/ajax/libs/typicons/2.0.8/typicons.eot");
  src: url("https://cdnjs.cloudflare.com/ajax/libs/typicons/2.0.8/typicons.eot?#iefix") 
format('embedded-opentype'),
       url("https://cdnjs.cloudflare.com/ajax/libs/typicons/2.0.8/typicons.woff") format('woff'),
       url("https://cdnjs.cloudflare.com/ajax/libs/typicons/2.0.8/typicons.ttf") format('truetype'),
       url("https://cdnjs.cloudflare.com/ajax/libs/typicons/2.0.8/typicons.svg#typicons") format('svg');
  font-weight: normal;
  font-style: normal;
}

Next:
SSH to your site, then modify:

nano vendor/antoinefr/flarum-ext-bbcode-fa/src/Listeners/AddBBCode.php

After:

 public function addBBCode(ConfigureFormatter $event)
    {
        $event->configurator->BBCodes->addCustom(
            '[FA]{IDENTIFIER}[/FA]',
            '<i class="fa fa-fw fa-{IDENTIFIER}"></i>'
        );

Add:

$event->configurator->BBCodes->addCustom(
            '[TI]{IDENTIFIER}[/TI]',
            '<i class="typcn typcn-{IDENTIFIER}"></i>'
        );

To use a Typicon in your post use

[TI]pencil[/TI]

Typicon cheatsheet:
http://typicons.com/

I added another Custom BBcode for Material Design Iconic Font:
http://zavoloklom.github.io/material-design-iconic-font/index.html

Add to custom header:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css">

Add to custom CSS:

@font-face {
  font-family: 'material-design-iconic-font';
  src: url("https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/fonts/Material-Design-Iconic-Font.eot");
  src: url("https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/fonts/Material-Design-Iconic-Font.eot?#iefix") 
format('embedded-opentype'),
       url("https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/fonts/Material-Design-Iconic-Font.woff") format('woff'),
       url("https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/fonts/Material-Design-Iconic-Font.ttf") format('truetype'),
       url("https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/fonts/Material-Design-Iconic-Font.svg#typicons") format('svg');
  font-weight: normal;
  font-style: normal;
}

Edit:

vendor/antoinefr/flarum-ext-bbcode-fa/src/Listeners/AddBBCode.php

Add:

 $event->configurator->BBCodes->addCustom(
            '[MDI]{IDENTIFIER}[/MDI]',
            '<i class="zmdi zmdi-{IDENTIFIER}"></i>'
        );

To use in post

[MDI]flower[/MDI]

Cheatsheet:
http://zavoloklom.github.io/material-design-iconic-font/icons.html

Added Weather Icons: http://erikflowers.github.io/weather-icons/

Add to custom header:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons.css">

Add to custom CSS:

@font-face {
  font-family: 'weather-icons';
  src: url("https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/font/weathericons-regular-webfont.eot");
  src: url("https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/font/weathericons-regular-webfont.eot?#iefix") 
format('embedded-opentype'),
       url("https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/font/weathericons-regular-webfont.woff") format('woff'),
       url("https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/font/weathericons-regular-webfont.ttf") format('truetype'),
       url("https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/font/weathericons-regular-webfont.svg") format('svg');
  font-weight: normal;
  font-style: normal;
}

Edit:

vendor/antoinefr/flarum-ext-bbcode-fa/src/Listeners/AddBBCode.php

Add:

  $event->configurator->BBCodes->addCustom(
            '[WI]{IDENTIFIER}[/WI]',
            '<i class="wi wi-{IDENTIFIER}"></i>'
        );

To use in post:

[wi]meteor[/wi]

Weather Icon Cheatsheet:
http://erikflowers.github.io/weather-icons/

jordanjay29

Tbh I only know how to git clone ?

I could folk the extension and add the code but I do not know how to inject custom css that is needed. I believe the current FA Bbcode ext takes advantage of the fontawesome css already present in core.