-
AuthorPosts
-
February 7, 2023 at 7:54 pm #1397044
Greetings, I have a site at http://paxsonpta.org/donate – I would like to create a font awesome icon before the accordion title. Can someone direct me on how to do this? I tried pasting in the font awesome code in the accordion title field but it wasn’t rendering. Thank you!
- This topic was modified 1 year, 9 months ago by CopperCityCreative.
February 8, 2023 at 4:06 am #1397062Hey CopperCityCreative,
Thanks for the link to your site, I see that you have already installed the Font Awesome font, so to add a Font Awesome icon to before the accordion title you first need to find the unicode for the icons you wish to use, for example f09d is a credit card and f3d1 is cash.
Then add the unicode to css like this:.togglecontainer p[data-fake-id="#toggle-id-1"]:before { font-family: "Font Awesome 5 Free"; content: "\f09d"; font-size: 40px; padding-right: 12px; } .togglecontainer p[data-fake-id="#toggle-id-1"] { display: flex; } .togglecontainer p[data-fake-id="#toggle-id-2"]:before { font-family: "Font Awesome 5 Free"; content: "\f3d1"; font-size: 40px; padding-right: 12px; } .togglecontainer p[data-fake-id="#toggle-id-2"] { display: flex; }
This is the result:
After applying the css, please clear your browser cache and check.Best regards,
MikeFebruary 8, 2023 at 8:44 pm #1397229Hi Mike, awesome!! Thank you so much for the detailed instructions. This worked perfectly.
February 8, 2023 at 9:25 pm #1397230Hi again, Mike,
when I try to add the icon .fa-money-check-dollar – unicode \f53d – it’s not working. You can see that the site has the icon available because I put the code
<i class="fa-solid fa-money-check-dollar"></i>
in the title input area and it is displaying the icon.February 9, 2023 at 7:23 am #1397269Hi,
I don’t see your .fa-money-check-dollar – unicode \f53d example on the page, I believe this belongs to a different Font Awesome font family so you need to find out what the correct font family name is.
The \f3d1 that I tested was for the “Font Awesome 5 Free” font family.Best regards,
Mike -
AuthorPosts
- You must be logged in to reply to this topic.