Navigation
Archive / Change accordion title into an icon
This is archived content. Visit our new forum.
  • Author
    Posts
  • January 13, 2016 at 5:02 am #744049
    dale w
    Participant

    Hi,

    How do i change the text of an accordion title into an icon?
    I want to have the same icons that are om my home page at this page in the accordion: http://funinfinance.nl/diensten/

    January 13, 2016 at 5:17 am #744063
    Thai
    Moderator

    Hi Dale,

    Please replace your accordion titles with these HTML codes:

    <i class="x-icon-pencil circle" data-x-icon="" style="color: #fff;border-radius: 100em;font-size: 24px;width: 51px;text-align: center;border: 4px solid #fff;"></i>

<i class="x-icon-euro circle" data-x-icon="" style="color: #fff;border-radius: 100em;font-size: 24px;width: 51px;text-align: center;border: 4px solid #fff;"></i>

<i class="x-icon-line-chart circle" data-x-icon="" style="color: #fff;border-radius: 100em;font-size: 24px;width: 51px;text-align: center;border: 4px solid #fff;"></i>

<i class="x-icon-file-word-o circle" data-x-icon="" style="color: #fff;border-radius: 100em;font-size: 24px;width: 51px;text-align: center;border: 4px solid #fff;"></i>

<i class="x-icon-comment-o circle" data-x-icon="" style="color: #fff;border-radius: 100em;font-size: 24px;width: 51px;text-align: center;border: 4px solid #fff;"></i>

    Hope it helps 🙂

    January 13, 2016 at 5:20 am #744066
    dale w
    Participant

    Thank you very much!

    January 13, 2016 at 5:25 am #744071
    dale w
    Participant

    Where can I replace them because if I replace it in the title it doesn’t work?

    January 13, 2016 at 5:32 am #744077
    Thai
    Moderator

    Hi There,

    Please replace the double quote with single quote:

    <i class='x-icon-pencil circle' data-x-icon='' style='color: #fff;border-radius: 100em;font-size: 24px;width: 51px;text-align: center;border: 4px solid #fff;'></i>

<i class='x-icon-euro circle' data-x-icon='' style='color: #fff;border-radius: 100em;font-size: 24px;width: 51px;text-align: center;border: 4px solid #fff;'></i>

<i class='x-icon-line-chart circle' data-x-icon='' style='color: #fff;border-radius: 100em;font-size: 24px;width: 51px;text-align: center;border: 4px solid #fff;'></i>

<i class='x-icon-file-word-o circle' data-x-icon='' style='color: #fff;border-radius: 100em;font-size: 24px;width: 51px;text-align: center;border: 4px solid #fff;'></i>

<i class='x-icon-comment-o circle' data-x-icon='' style='color: #fff;border-radius: 100em;font-size: 24px;width: 51px;text-align: center;border: 4px solid #fff;'></i>

    Let us know how it goes!

    January 13, 2016 at 5:40 am #744082
    dale w
    Participant

    It Works thanks!

    January 13, 2016 at 5:59 am #744105
    dale w
    Participant

    Now I need another icon the PDF icon. But how can i make the html codes by myself?
    Where can I look up wich class title I need and wich data-x-icon to pick?
    I searched for it and found for class=’fa-file-pdf-o’ but it didn’t worked.

    January 13, 2016 at 6:21 am #744125
    Paul R
    Moderator

    Hi Dale,

    For the pdf icon, you try this code.

    
<i class='x-icon-file-pdf-o circle' data-x-icon='' style='color: #fff;border-radius: 100em;font-size: 24px;width: 51px;text-align: center;border: 4px solid #fff;'></i>

    You need to use x-icon instead of fa then set the proper unicode for data-x-icon

    https://fortawesome.github.io/Font-Awesome/cheatsheet/

    Hope that helps

    February 2, 2016 at 8:59 am #776096
    Chad
    Participant

    I have tried this one and it does work on the Cornerstone editor but then it’s not showing up on the actual page when viewed. The code is gone as well each time I reopen to edit it.

    February 2, 2016 at 11:33 am #776348
    Rupok
    Member

    Hi @chadfatatom-com

    Thanks for updating. It’s a working example and should work fine. However it might not display on editor. You can share your login credentials in a private reply if you want us to investigate the issue.

    Cheers!

    February 2, 2016 at 11:39 am #776357
    Chad
    Participant
    This reply has been marked as private.
    February 2, 2016 at 12:38 pm #776470
    Rupok
    Member

    Hi Chad,

    It seems you have already opened a new thread for this – https://community.theme.co/forums/topic/adding-icon-into-the-accordion-title/

    We’ll reply there to assist you on this. You don’t need to reply on this thread anymore.

    Cheers!

  • Author
    Posts
  • <script> jQuery(function($){ $("#no-reply-744049 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>