News:

Want to get involved in developing SMF, then why not lend a hand on our github!

Main Menu

Font AweaZome BBC Code

Started by Vehement Works, May 09, 2017, 05:46:15 PM

Previous topic - Next topic

Vehement Works

Link al mod

Font AweaZome
Author: zStudios Networks

Description

For SMF 2.0.x only

This mod will add a tags: 
[fa]fa-rebel[/fa]

Using the Font Aweasome CDN for implement the Font Aweasome Icons via BBC  for the threads, and HTML for your forum templates.
License

* This SMF modification is subject to the Mozilla Public License Version
* 2.0 (the "License"); you may not use this SMF modification except in compliance with
* the License. You may obtain a copy of the License at
* http://www.mozilla.org/MPL/

Languages
-English/utf8

Changelog

1.0 - Jan 07, 2017
-Code improved.

1.2 - May 18, 2017
-Stack Icons  feature added [fasi]
Note: For the usage of this modification we use the javascript CDN of Font Awesome, who has a function of error reports, any error from font awesome icon will be reported to their server..

1.3 - Jul 03, 2018
-Update to FontAweasome 5.1 Icons.
Last released modifications: AdSense Mod|Font AweaZome BBC code

Shambles

QuoteNote: ... always is get reports from our forums about errors from FontAweasome. it's all secure.

Can you explain what that means (it makes no sense to me).

Thanks.

Vehement Works

For the usage of this modification we use the javascript CDN of Font Awesome, who has a function of error reports, any error from font awesome icon will be reported to their server.

so, its secure for us.

I'm sorry if I was not clear, English is not my mother tongue
Last released modifications: AdSense Mod|Font AweaZome BBC code

pocttopus

Any example how to implement or use this mod?
Thanks!

keyboard

Yes, I am also interested on the implementation also !!!
Слaва
Украинi

Vehement Works

use the font awesome icon codes
here's a list of them: http://fontawesome.io/cheatsheet/

Per Example: [fa]fa-rebel[/fa]

And you can add the other options

http://fontawesome.io/examples/

some of them won't work very well.

and for webmasters, you can add FontAwesome too, but in HTML.
Last released modifications: AdSense Mod|Font AweaZome BBC code

pocttopus

This mod is not working properly or I am doing something wrong!?  :o
Here what need's to be done on a every installation process. Editing files because the mod won't install by itself.



Adding a javascript code is not working. I can see the black flag icon but there are issues with smiles collection which are bellow the tag icons on the menu.
The [fa] tag also is not working properly.

Sorry folk, but I don't see something useful.  :(

Antes

Its working fine.

This should be the FontAweaZome.xml
Code (Original) Select
<file name="$themedir/index.template.php">
<operation>
<search position="before"><![CDATA[
// Here comes the JavaScript bits!
echo '
]]></search>
<add><![CDATA[
<script src="https://use.fontawesome.com/aa22eb6168.js"></script>
]]></add>
</operation>
</file>

Code (Suggested) Select
<file name="$themedir/index.template.php">
<operation>
<search position="before"><![CDATA[ // Here comes the JavaScript bits!
echo ']]></search>
<add><![CDATA[
<script src="https://use.fontawesome.com/aa22eb6168.js"></script>]]></add>
</operation>
</file>

Vehement Works

Quote from: pocttopus on May 12, 2017, 10:33:07 AM
This mod is not working properly or I am doing something wrong!?  :o
Here what need's to be done on a every installation process. Editing files because the mod won't install by itself.



Adding a javascript code is not working. I can see the black flag icon but there are issues with smiles collection which are bellow the tag icons on the menu.
The [fa] tag also is not working properly.

Sorry folk, but I don't see something useful.  :(


its a little error in the installation file
Quote from: Antes on May 12, 2017, 11:13:42 AM
Its working fine.

This should be the FontAweaZome.xml
Code (Original) Select
<file name="$themedir/index.template.php">
<operation>
<search position="before"><![CDATA[
// Here comes the JavaScript bits!
echo '
]]></search>
<add><![CDATA[
<script src="https://use.fontawesome.com/aa22eb6168.js"></script>
]]></add>
</operation>
</file>

Code (Suggested) Select
<file name="$themedir/index.template.php">
<operation>
<search position="before"><![CDATA[ // Here comes the JavaScript bits!
echo ']]></search>
<add><![CDATA[
<script src="https://use.fontawesome.com/aa22eb6168.js"></script>]]></add>
</operation>
</file>


very thanks, i forgot upload the final package from github to smf.
Last released modifications: AdSense Mod|Font AweaZome BBC code

pocttopus

^ after you changed the code now is working and mod is perfectly fine.

Cheers.  ;)

gorbi

give me example how create Larger Icons

Vehement Works

Quote from: gorbi on May 14, 2017, 01:48:16 PM
give me example how create Larger Icons

http://fontawesome.io/examples/

[fa]fa-camera-retro fa-5x[/fa]

and now the camera icon its bigger.

This is an example of the icon on HTML
<i class="fa fa-camera-retro fa-5x"></i>
*The red part must be inside the bbcode of fontawesome
**Do not add the first fa cause the bbcode already have it one
Last released modifications: AdSense Mod|Font AweaZome BBC code

gorbi

give me example use BBC for create Stacked Icons. Thanks

Arantor

I don't think this supports it.

Vehement Works

For now the BBC code for Stacked icons isn't in the package, We are doing some changes in this modification, to add the Stacked icons and List icons, to have a complete version until the release of Font Aweasome 5.
Last released modifications: AdSense Mod|Font AweaZome BBC code

pocttopus

Quote from: zStudios Team on May 15, 2017, 08:25:42 AM
For now the BBC code for Stacked icons isn't in the package, We are doing some changes in this modification, to add the Stacked icons and List icons, to have a complete version until the release of Font Aweasome 5.
This would be great!  :)

pocttopus

Now I see that the mod is not working to all themes. ???
Is there any way to fix this issue?

Thanks! :)

Vehement Works

This package should work on any theme, because only the index.template.php of each theme is edited to add the libraries.

Its working fine.

search this in the index.template.php of you current theme

// Here comes the JavaScript bits!
echo '


And add this
         
<script src="https://use.fontawesome.com/aa22eb6168.js"></script>
Last released modifications: AdSense Mod|Font AweaZome BBC code

Vehement Works

New update

1.2 - May 18, 2017
-Stack Icons  feature added [fasi]

how to use it :  http://smfdemo.zstudios.es/index.php?topic=3
Last released modifications: AdSense Mod|Font AweaZome BBC code

pocttopus

#19
Im a big fan of these icons so this is really great news.
If only there is any chance to implement these icons or some of them inside the menu of "reply" page it would be very useful and more easy for every member.

There are lot of basic members which are not very well introduced into these FontAwesome icons, but they are really great and good looking with a lot of options especially now with this new tag [fasi] update.

Keep it up!  :)

Advertisement: