Joomla Templates Club 406,261 posts

[Andy Fernandez Friend Andy FernandezJoin date: September 2015Posts: 52Downloads:13Uploads:35 Thanks: 18 Thanked: 1 times in 1 posts]

#951186

Hello,

I was looking at the examples for Font Awesome and they talk about stacking the icons.
_To stack multiple icons, use the fa-stack class on the parent, the fa-stack-1x for the regularly sized icon, and fa-stack-2x for the larger icon. fa-inverse can be used as an alternative icon color. You can even throw larger icon classes on the parent to get further control of sizing.__

Is this possible to be used in the Uber template for the icons?

Thanks for your help.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#951212

Hi
yes you can use the icon code in uber template .
example :

<i class="fa fa-arrow-up fa-2x"></i>

1 user says Thank You to Pankaj Sharma for this useful post

1. Andy Fernandez

[Andy Fernandez Friend Andy FernandezJoin date: September 2015Posts: 52Downloads:13Uploads:35 Thanks: 18 Thanked: 1 times in 1 posts]

#951214

Thanks Pankaj!

Sorry for the confusion but where in the template, the same place where I specify the FA icon?

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#951270

Hi
You can use it in custom html modules or anywhere , where the icons are used .

1 user says Thank You to Pankaj Sharma for this useful post

1. Andy Fernandez

[Andy Fernandez Friend Andy FernandezJoin date: September 2015Posts: 52Downloads:13Uploads:35 Thanks: 18 Thanked: 1 times in 1 posts]

#951486

That worked great, had to change my editor since it was stripping some of the HTML. If I wanted to use these on an ACM block, can that receive custom HTML as well? All I see is where to put the FA icon name.

Thank again for the great support.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#951635

Hi
Apply the same way in ACM too (feature intro).
Like Here > > > http://prntscr.com/bv36ll

[Andy Fernandez Friend Andy FernandezJoin date: September 2015Posts: 52Downloads:13Uploads:35 Thanks: 18 Thanked: 1 times in 1 posts]

#951823

Hi Pankaj,

This is what I am trying to accomplish. This is from the font awesome site.

To stack multiple icons, use the fa-stack class on the parent, the fa-stack-1x for the regularly sized icon, and fa-stack-2x for the larger icon. fa-inverse can be used as an alternative icon color. You can even throw larger icon classes on the parent to get further control of sizing.

<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x">
<i class="fa fa-twitter fa-stack-1x">

fa-twitter on fa-square-o

Here is the URL http://fontawesome.io/examples/#stacked

Where can I put the code for the second icon, so far I can only add the properties for the single icon.

---

Attachments:

1. 
2. 

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#951916

Hi
in ACM You can defined only one icon at a time , as they are defined separate blocks
Here : http://prntscr.com/bv36ll

[Author]

Posts