Use Font Awesome behind an h1 (header) element?
-
-
- Patrick Toulze
- Elite Rocketeer
- Posts: 1810
- Thanks: 18
- Marketing - Web Designer
-
Anybody have a good idea to be able to use Font Awesome behind an h1 (header) element?
In my case these header element have already a special class assign to them...
I’m not to sure how to proceed (with template using Awesome already) - Graphic Designer - Marketing -Web Sites — Trying to become a decent human being.
www.grafcomm.ca
-
-
-
- Patrick Toulze
- Elite Rocketeer
- Posts: 1810
- Thanks: 18
- Marketing - Web Designer
-
I answer my own question;
The best way I find to be able to add font Awesome to h1 or whatever is:
I add a Span class (with the icon-whatever Awesome class) inside the Header code.
in this following example I add the spot class to be sure I don’t overrule the template css.
Note; If you use JCE you can add those Awesome Span as template and add them where you want.
Example:
<h2 class=" orangetitle "><span class="icon-star spot "> </span>Service d’aiguisage de patins et maintien d’équipements</h2>
Now I need help to make a Less rule that will take in consideration all the possibilities for the span class
Example:
<span class="icon-star spot "> </span>
or
<span class="icon-cog spot "> </span>
or
<span class="icon-whatever spot "> </span>
I know I can do that but I’m not to sure how?
Looking..... and trying (need to learn that Less but not to much time to do so...) - Graphic Designer - Marketing -Web Sites — Trying to become a decent human being.
www.grafcomm.ca
-
-
-
- Patrick Toulze
- Elite Rocketeer
- Posts: 1810
- Thanks: 18
- Marketing - Web Designer
-
Ok I’m almost there
I use this css:
That work on all span with Awesome code icon-cog, icon-star or whatever.span[class^="icon-"] {display:inline !important; color:#005390 !important;}
But how can I add the “spot” class in there ???? :shock: - Graphic Designer - Marketing -Web Sites — Trying to become a decent human being.
www.grafcomm.ca
-
-
-
- Patrick Toulze
- Elite Rocketeer
- Posts: 1810
- Thanks: 18
- Marketing - Web Designer
-
I try.
span[class^="icon-"] .spot {display:inline !important; color:#005390 !important;}
Don’t work...
I just have to add the “spot” class in the rule, but how? - Graphic Designer - Marketing -Web Sites — Trying to become a decent human being.
www.grafcomm.ca
-
Time to create page: 0.053 seconds