Hey @pruthe,
That´s a very useful hint 
as I am also on Blocs 4 now.
Thank you and stay safe!
Greetings from Cologne
1 Like
Hey @Jerry,
Thank you so much for your help.
I fiddled around a bit and it seems your helpful class is not effecting paragraphs.
So far it all works well thanks to your great help.
Super!
Greetings from Cologne
1 Like
I did it like this (color included):
<style>
#accordion-46118 .card-header a:after{
font-family: “Font Awesome 5 Free”;
content: “\f068”
display: inline-block;
float: right;
margin-right: -20px;
vertical-align: middle;
color: #F8A319;
}
#accordion-46118 .card-header a[aria-expanded=“true”]:after{
font-family: “Font Awesome 5 Free”;
content: “\f068”
}
#accordion-46118 .card-header a[aria-expanded=“false”]:after{
font-family: “Font Awesome 5 Free”;
content: “\f067”
}
1 Like
@pruthe couldn’t you have posted this 24h earlier?!.. I searched 4 hours yesterday to find it out myself 
I came up with the same solution but forgot the " "… drove me crazy 
Yeah, Some of the old posts might need updates 
1 Like
Sorry!!! I made my post as soon as I saw @pixelwork’s post. I found the solution only a few days ago by using @JDW’s post and clicking the fontawesome.com link. The font-family update is in there.
Hope everything OK now. 
pruthe
2 Likes
Hey Folks,
First I would like to thank you all for your engagement, this forum is just great.
After being successful on Blocs 3 I tried to create an accordion on Blocs 4 with the mentioned “Font Awesome 5 Free”.
All works well except +/- is not showing.
I used this code:
Any idea what I am doing wrong?
Hi @pixelwork, what if you try to use:
<i class="fas fa-minus"></i>
```and
<i class="fas fa-plus"></I> instead?Hi Jerry,
Thanks for your attention.
I am sorry to ask this stupid question, but where should I put your suggestion? 
I’ll give it a shot later when back at the office. In the mean time I found this one while waiting in traffic: https://www.angularjswiki.com/fontawesome/csscontentcode/
If I understand correctly you’ll need to add a font weight as well. i.e ```
font-weight: 400;
Thx Jerry,
I can´t work it out in the moment. I wonder how @pruthe made it work.
Traffic in paradise?
1 Like
Yeah, we’re all on the way to the beach for a rum coconut 
I can’t get it to work as well. Off to bed now, will give it another try tomorrow with coffee 
. I’m pretty sure the error is in here:
#accordion-11011 .card-header a:before
EDIT: @PeteSharp, should have finished his first coffee by now. 
1 Like
I’m looking at what’s going on. Will let you know if I find anything. 
2 Likes
Hi again,
It’s necessary to force the Font Awesome icons to be included in the Blocs project. Apparently in my other project I used a Font Awesome icon somewhere. Here’s an updated sample blocs file with a change. I added an icon-heading bric over each accordion and the ± showed up.
Accordion_Toggle_Switch_Groups-icon.bloc (726.2 KB)
Hope this helps.
pruthe
Update: I used a Facebook icon in my project so that’s why Font Awesome was included.
1 Like
I’m only on my phone. But from memory, yes Blocs won’t include Font Awesome unless you use it. And it doesn’t know you want to use it if your using just code.
1 Like
Yes, I can confim this. It’s only working, if you use an icon with FA 5 Free somewhere on the project.
the code above doesn’t implement the font itself.
@Malachiman this time I’m asking, before trying myself for 4 hours
How do I apply it to more than 1 accordions on the same page? Do I have to repeat the whole code and change the #accordion-nr.? Or ist there a more simple solution?
Yeah that code was targeting one accordion. The easiest way would be to add a class to all your accordions like
.myaccordion
Call it what ever you want. Then use that class instead of the ID. The Accordion uses cards, so we want to still target them, other wise your CSS will effect cards on your page if you have them.
With that class in place, the CSS will style all of them.
1 Like
genius solution! works perfectly.
one more time, thank you very much!!
Slightly speedier… I replied 3 hours after your post 
2 Likes