Link al mod (https://custom.simplemachines.org/mods/index.php?mod=4143)
Font AweaZome
Author: zStudios Networks (http://zstudios.es)
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/ (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.
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.
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
Any example how to implement or use this mod?
Thanks!
Yes, I am also interested on the implementation also !!!
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.
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.
(https://s9.postimg.org/gdspsaomz/Capture1.jpg) (https://postimg.org/image/gdspsaomz/)
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 working fine.
This should be the FontAweaZome.xml
<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>
<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>
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.
(https://s9.postimg.org/gdspsaomz/Capture1.jpg) (https://postimg.org/image/gdspsaomz/)
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
<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>
<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.
^ after you changed the code now is working and mod is perfectly fine.
Cheers. ;)
give me example how create Larger Icons
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
give me example use BBC for create Stacked Icons. Thanks
I don't think this supports it.
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.
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! :)
Now I see that the mod is not working to all themes. ???
Is there any way to fix this issue?
Thanks! :)
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>
New update
1.2 - May 18, 2017
-Stack Icons feature added [fasi]
how to use it : http://smfdemo.zstudios.es/index.php?topic=3
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! :)
Quote from: zStudios Team on May 19, 2017, 03:37:29 AM
New update
1.2 - May 18, 2017
-Stack Icons feature added [fasi]
how to use it : http://smfdemo.zstudios.es/index.php?topic=3
Please, can you update the link because it's not working anymore.
Just to see the example of "fasi".
Thanks! :)
I got this working on my dev system but am seeing these errors in my error log every time i post:
8: Undefined index: fasi
File: /var/www/html/Sources/FontAweaZome.php
Line: 58
8: Undefined index: fa
File: /var/www/html/Sources/FontAweaZome.php
Line: 51
I assume that it's no issue but i wanted to report it before i go live.
was just installing this again, rebuilding one of my forums
you can create a kit for free and use their link
https://fontawesome.com/start
would look something like
<script src="https://kit.fontawesome.com/YOURKITNAME.js" crossorigin="anonymous"></script>
in your theme's index.template.php
find
// The ?fin20 part of this link is just here to make sure browsers don't cache it wrongly.
echo '
and add the link from your kit below the echo '
or just find where all of your .css are listed and add it in there
this will allow you to use some of the newer icons
now in Modifications.english.php and Modifications.english-utf8.php
at the end add
$txt['fa'] = 'Insert Font Aweasome BBC';
$txt['fasi'] = 'Insert Layered Font Aweasome BBC';
translate the above to add to whatever your Modifcations.LANGUAGE.php files are
in Sources/FontAweaZome.php
find
'content' =>'<span class="fa $1"></span>',
replace
'content' =>'<span class="$1"></span>',
find
'content' =>'<span class="fa $1 {op}"></span>',
replace
'content' =>'<span class="$1 {op}"></span>',
find
'content' =>'<span class="fa-stack fa-lg"><i style="color:{b};" class="fa {a} fa-stack-2x"></i><i style="color:{c};" class="fa $1 fa-stack-1x"></i></span>',
replace
'content' =>'<span class="fa-stack fa-lg"><i style="color:{b};" class="{a} fa-stack-2x"></i><i style="color:{c};" class="$1 fa-stack-1x"></i></span>',
now you aren't stuck just using the fa fa-icon
now you can use any by inserting them
[fa]fas fa-kaaba[/fa]
[fa]fab fa-facebook-f[/fa]
[fa]far fa-keyboard[/fa]
and you can layer icons and color them
[fasi a=fas fa-stop b=white c=red]fas fa-kaaba[/fasi]
so a is the background icon
b is the background color
c is the foreground color
and the icon between the [fasi] tags is the foreground icon