Another Font Awesome Question

[bangmaster]

So, I applied a color tag to my .fa tag, but what do I do if I want two different colors for .fa? I'd apply a normal class, to it, but when I add the .fa tag it looks as follows:

<i class="fa fa-commenting" aria-hidden="true"></i>

The i tag already has a class, so I can't put another one in, can I? Any help would be appreciated.

[djohnson]

In general, yes you can apply multiple classes to any tag; in the example, both "fa" and "fa-commenting" are separately-defined classes. So you could write

Code: Select all

<i class="fa fa-commenting my-color-class" aria-hidden="true"></i>

This will apply three tags: fa, fa-commenting, and my-color-class. Keep in mind that cascading rules will apply; individual style definitions in my-color-class will override the same styles if they are defined in fa.

If your CSS looks like this

Code: Select all

i.my-color-class { color: yellow; }
i.fa { color: red; background-color: green; }

then your Font Awesome icon will display as yellow-on-green.

The biggest drawback to applying multiple classes to any tag is that they are not carried over to print output; if you want to use Font Awesome in PDF output, you will need to define a single class with all the styles that you want to include.

[Nita Beck]

I *strongly* encourage you to watch this recorded webinar in its entirety. It is well worth the hour you'll spend. Mike Kelley offers fantastic guidance on font iconography, using Font Awesome in particular:

http://www.madcapsoftware.com/webinars/ ... e-outputs/

[bangmaster]

That worked perfectly. Thank you, Don. Appreciate the link, Nita. I'll check it out.