Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • February 7, 2023 at 7:54 pm #1397044
    CopperCityCreative

    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!

    February 8, 2023 at 4:06 am #1397062
    Mike

    Hey 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.
    Enfold_Support_306.jpeg
    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:
    Enfold_Support_304.jpeg
    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    February 8, 2023 at 8:44 pm #1397229
    CopperCityCreative

    Hi Mike, awesome!! Thank you so much for the detailed instructions. This worked perfectly.

    February 8, 2023 at 9:25 pm #1397230
    CopperCityCreative

    Hi 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 #1397269
    Mike

    Hi,
    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

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.