Joomla Templates Club 406,261 posts

[woluweb Friend woluwebJoin date: October 2012Posts: 196Downloads:18Uploads:69 Thanks: 68 Thanked: 31 times in 3 posts]

#193748

Hi there,

With the recent updates of the last months, both of templates & of T3, I had understood (hoped) that Font Awesome would have been integrated (for using for example with the megamenu, but also in articles).

But after testing both on JA Beranis & on JA OnePage (even after reCompile LESS to CSS, just in case), it seems we are still limited to version 3 (icon-home etc, ie some “old and short list”) and not version 4 (fa-home etc, ie the long recent list).

Is anything planned to upgrade very soon ?
Or if not, how can I manually point to the lastest, present version of Font Awesome.

Txs in advance,

Marc

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#518522

Hi Marc,

Currently, the uprade plan is not in place yet. I’m not entirely sure you can add Font Awesome 4 into JA Beranis Template. But I have workaround below, hope it helps.

1) Download and extract my attached file

2) Copy fonts folder and paste to templates/ja_beranis path

3) Open templates/ja_beranis/etc/assets.xml file

Change


<stylesheets>
<file>http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,700,500italic,700italic,900,900italic</file>
</stylesheets>


To:

<stylesheets>
<file>fonts/font-awesome/css/font-awesome.min.css</file>
<file>http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,700,500italic,700italic,900,900italic</file>
</stylesheets>

Let me know how it goes.

---

Attachments:

1. fonts.zip

[woluweb Friend woluwebJoin date: October 2012Posts: 196Downloads:18Uploads:69 Thanks: 68 Thanked: 31 times in 3 posts]

#518538

Hi Ninja Lead,

Txs for your quick answer. We are on the way to the solution, but I have not implemented yet because I see there is *already* a l/templates/ja_beranis/fonts/font-awesome folder (well, I have just updated to Beranis 1.0.4, but it was probably already there).

There, on the currently existing font-awesome.less file, I can read the following :
/*!
* Font Awesome 3.2.1
* the iconic font designed for Bootstrap

… while editing font-awesome.less in your attachment I read
/* Font Awesome 3.0
the iconic font designed for use with Twitter Bootstrap

My question was more about using Font Awesome 4 (by the way, the link in Template Manager > Megamenu leads to Font Awesome 4).

Do you have another attachment for integrating FA4 ?
(for the rest, I guess the procedure would remain the same)

Txs in advance,

Marc

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#518607

Apologize for my mistake, LESS files are not used in this case, you can drop it.

All Font Awesome 4, you can find them in: fonts/font-awesome/css/font-awesome.min.css and fonts/font-awesome/css/font-awesome.css

[woluweb Friend woluwebJoin date: October 2012Posts: 196Downloads:18Uploads:69 Thanks: 68 Thanked: 31 times in 3 posts]

#518726

Yes, you point to the right file.
But it is exactly my point : so far, all templates (latest version as of beginning 2014) still use the 3.2.1 Font Awesome.

So I restate my question : do you have the following files ADAPTED to the present Font Awesome (ie version 4)
– fonts/font-awesome/css/font-awesome.min.css
– fonts/font-awesome/css/font-awesome.css

… together with the different font files :
– fontawesome-webfont.eot
– fontawesome-webfont.svg
– fontawesome-webfont.ttf
– fontawesome-webfont.woff
– FontAwesome.otf

We’re almost there. I am looking forward to your answer (and why not, to a general upgrade of all templates).
Yours,

Marc

/*!
* Font Awesome 3.2.1
* the iconic font designed for Bootstrap
* ------------------------------------------------------------------------------
* The full suite of pictographic icons, examples, and documentation can be
* found at http://fontawesome.io. Stay up to date on Twitter at
* http://twitter.com/fontawesome.
*
* License
* ------------------------------------------------------------------------------
* - The Font Awesome font is licensed under SIL OFL 1.1 -
* http://scripts.sil.org/OFL
* - Font Awesome CSS, LESS, and SASS files are licensed under MIT License -
* http://opensource.org/licenses/mit-license.html
* - Font Awesome documentation licensed under CC BY 3.0 -
* http://creativecommons.org/licenses/by/3.0/
* - Attribution is no longer required in Font Awesome 3.0, but much appreciated:
* "Font Awesome by Dave Gandy - http://fontawesome.io"
*
* Author - Dave Gandy
* ------------------------------------------------------------------------------
* Email: dave@fontawesome.io
* Twitter: http://twitter.com/davegandy
* Work: Lead Product Designer @ Kyruus - http://kyruus.com
*/
/* FONT PATH
* -------------------------- */
@font-face {
font-family: 'FontAwesome';
src: url('../font/fontawesome-webfont.eot?v=3.2.1');
src: url('../font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('../font/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('../font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('../font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
font-weight: normal;
font-style: normal;
}

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#518779

I see that you expect our’s JA Template to use Font Awesome 4. However, it takes us time to review such change, some factors need to put into consideration: templates need to change Font Awesome 3 to 4, extensions compatibility….

Thanks for your understanding on this.

1 user says Thank You to Ninja Lead for this useful post

1. woluweb

[woluweb Friend woluwebJoin date: October 2012Posts: 196Downloads:18Uploads:69 Thanks: 68 Thanked: 31 times in 3 posts]

#518830

No worry, I can understand it is not done like in one day, because all templates are concerned etc.

Still, sooner or later I hope all templates will integrate Font Awesome 4 ! 🙂

(and by the way, for the moment it is quite confusing, bc when you click on the “icon” link in the Template Manager > Megamenu, you are linked to the webpage of Font Awesome 4… and not of Font Awesome 3)

[woluweb Friend woluwebJoin date: October 2012Posts: 196Downloads:18Uploads:69 Thanks: 68 Thanked: 31 times in 3 posts]

#518964

Hi there,

T3 and all Joomlart templates “only” integrates Font Awesome 3 but you would like to be able to use Font Awesome 4 ?

Hopefully, one day, Font Awesome 4 will be included by default.
But in the meantime, here is a very easy way to implement Font Awesome 4 on your website !

Moreover, it does not require heavy work. Just 1 minute to do… so this also means only 1 minute to undo if T3 ever ships natively with Font Awesome 4 🙂

Step 1 : activate Font Awesome 4 for your site

In Joomla’s Backend, go to Extensions > Template Manager > [ name of your template ] > select tab Custom code.
Paste the following code into the After <head> section :

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

Step 2 : a little additional CSS rule if you want to use Font Awesome 4 also in the MegaMenu

If you use Font Awesome 4 icons in the megamenu, there will be absolutely no space between the icon and the title of the menu. To fix this, we need to add a 5 pixels right margin after the icon.

To do this, go to the folder templatesja_beraniscss and edit the file custom.css
Add the following lines

.t3-megamenu .nav ,
.t3-megamenu .nav {
margin-right: 5px;
}

Note : usually, I prefer to work directly and properly on the LESS files and then generate the corresponding CSS files. In this case, as it is only about a few very specific lines, I use the famous “custom.css” file which is read after all css files.

Step 3 : Simply enjoy !

For the list of available icons, see http://fortawesome.github.io/Font-Awesome/icons/
For example of how to use them, see http://fortawesome.github.io/Font-Awesome/examples/

Example of use in Megamenu :
Where you would have put icon-home with Font Awesome 3, simply put fa fa-home with Font Awesome 4.
But all the possibilities of Font Awesome 4 are now open. Example : fa fa-cog fa-spin

Example of use in article :

---

Attachments:

1. 
2. 
3. 

1 user says Thank You to woluweb for this useful post

1. JA Developer

[Author]

Posts