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.
Another Font Awesome Question
-
- Propeller Head
- Posts: 91
- Joined: Wed Jul 01, 2015 3:52 pm
Re: Another Font Awesome Question
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
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
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.
Code: Select all
<i class="fa fa-commenting my-color-class" aria-hidden="true"></i>
If your CSS looks like this
Code: Select all
i.my-color-class { color: yellow; }
i.fa { color: red; background-color: 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.
Don Johnson
Flare 2020r3, Windows 10 in a Parallels VM on a 16" MacBook Pro [as of March 2021]
Flare 2020r3, Windows 10 in a Parallels VM on a 16" MacBook Pro [as of March 2021]
-
- Senior Propellus Maximus
- Posts: 3672
- Joined: Thu Feb 02, 2006 9:57 am
- Location: Pittsford, NY
Re: Another Font Awesome Question
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/
http://www.madcapsoftware.com/webinars/ ... e-outputs/
Nita
![Image](http://forums.madcapsoftware.com/download/file.php?id=2449)
RETIRED, but still fond of all the Flare friends I've made. See you around now and then!
RETIRED, but still fond of all the Flare friends I've made. See you around now and then!
-
- Propeller Head
- Posts: 91
- Joined: Wed Jul 01, 2015 3:52 pm
Re: Another Font Awesome Question
That worked perfectly. Thank you, Don. Appreciate the link, Nita. I'll check it out.