Font awesome and text in pseudo class

HTML & CSS
1

Hi
Is it possible to have the text font different than that of font awesome in the following

#fz-1 > a:before {
  background:rgba(219, 0, 114, 0.6);
  font-family: FontAwesome; 
  content:"\f015 \A Home";
}

I have another font-family for my text, but adding font awesome changes my text.

Thank you

2

What element is “#fz-1”?

An ID carries a massive weight of specificity and is probably overriding your other font (assuming you have another font assigned).

3

Thank you.

Yes another font is assigned.
Please take a look here:

I have assigned it here:
.slidenav > div > a:before{
and regardless of that the body has other font than that of font awesome.

4

Can you please post a URL to your test page so I can see the current code?

5

It sounds like you are wanting the font awesome icon and then another font for the pseudo text.

You won’t be able to set font-family: FontAwesome; without it the text changing too, as you’ve seen.

It may be possible to set the font awesome icon as a background image and position it above the text. Aren’t the icons svg images?

6

Thank you.

@ronpat
The URL (without font awesome) is ttri dot biz/fz_test/09/

@Ray.H
Correct, I tried searching for the svg, but couldn’t find it (must be tired!); anyhow since I have put the icon on the button (not hovered), I can just let the text slide, no big deal, and for sure not worth the time, specially you guys’ time.

7

The link passes HTML validation but fails css validation:

https://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fttri.biz%2Ffz_test%2F09%2F&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en

Try fixing the errors which will prevent browsers trying to guess your requirement s.

8

Well, you do have access to one more pseudo, the :after
You could certainly make use of it to keep from adding more elements to the html.

I glanced through the font awesome guide and I see how they use an <i> tag in the html and then they hook to it with a pseudo.

No need to clutter up the html when you still got an :after to work with. Then you CAN set your font-family: FontAwesome; on it and then use the encoded numbers in your content.

Just tested this with the ‘Home Icon’ \f015 and it works fine (doesn’t slide in but it could)…

keneso.zip (2.8 KB)

#fz-1 > a:before {background:rgba(219, 0, 114, 0.3); content:"Link \A One";}   /*opacity was 0.7*/
#fz-2 > a:before {background:rgba(114, 43, 168, 0.3); content:"Link \A Two";}
#fz-3 > a:before {background:rgba(83, 32, 153, 0.3); content:"\00A0 Link \A Three";}
#fz-4 > a:before {background:rgba(0, 91, 154, 0.3); content:"Link \A Four";}

#fz-1 > a:after, #fz-2 > a:after,
#fz-3 > a:after, #fz-4 > a:after {
    content:"";
    position: absolute;
    top:.25em; left:.25em;
    font-family: FontAwesome;
    font-size: 3em;
}
#fz-1 > a:after {content:"\f015";}
#fz-2 > a:after {content:"\f015";}
#fz-3 > a:after {content:"\f015";}
#fz-4 > a:after {content:"\f015";}
1 Like
9

Thank you.
Will work on it.

The link passes HTML validation but fails css validation:

Thank you for pointing it out, I am afraid I can’t do much, since it seems it’s bootstrap; I’ll try moving from bootstrap … will take some time, and work, not being an expert.

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.