Archived topic
pseudo-element won't show
5 replies · Started by Gerhard on May 3, 2022
Hi,
I created a back-link in a block with my own html:
<a class="pfeil-links" href="http://s857386238.online.de/category/1992/" title="back to 1992" style="padding:0.9rem 0.9rem 0.9rem 0;position:relative;">back</a>
Now I want to do the following css:
a.pfeil-links::before {
font-family: Font Awesome 5 Free;
content:'\e09d ';
position: absolute;
margin-right:0.4rem;
}But it doesn't have any effect ?!
Greetings from Cologne
Gerhard
Hi there,
you have this line of CSS which is broken:
th,td{padding: max(0.8rem, 0.8vw) max(1rem,1vw}
It is missing a closing bracket on the 2nd max property it should be:
th,td{padding: max(0.8rem, 0.8vw) max(1rem,1vw)}
Fix that as any CSS after a broken CSS rule may not work.
And aside from that - i do not see the Font Awesome Font library being loaded on your site...
Thank you David for your quick help!!!
How can I then add a font to the head of my html like so
<link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
Greetings from Cologne
Gerhard
You can use a Hook Element:
https://docs.generatepress.com/article/hooks-element-overview/
you can add your HTML to the text area
And select the wp_head hook to insert into the <head> of the site
Hello David,
thanks once more for your help!
I chose a little svg icon for the back-link though.
I'm just starting to discover the hook thing. So many possibilities...
the font link should be inserted into each single page of my site in case I want to use it?
Greetings from Cologne
Gerhard
the font link should be inserted into each single page of my site in case I want to use it?
Thats correct. In the Hook Element you can set the Display Rules > Location to Entire Site
