[ChadParticipant]

I tried adding icons using this code:

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

into the accordion title and it is showing up on the Cornerstone editor while it doesn’t in the actual page when viewed. Also, the code is lost whenever I reopen the editor.

Please help!
Thanks

[ChadParticipant]

This reply has been marked as private.

[RupokMember]

Hi there,

Thanks for writing in! It seems the page you provided doesn’t exists. Make sure to add the code and update us with correct URL.

Cheers!

[ChadParticipant]

Hi,

Sorry it’s http://42f.137.mwp.accessdomain.com/services/

Whenever I add the code it works on the preview but not on the page. Whenever I open it again in Cornerstone to edit the code is no longer there, it doesn’t save the code. Attached below is a screenshot .

[John EzraMember]

Hi there,

Thanks for updating the thread! The HTML in the title is being stripped out. Cornerstone is saving everything else. There isn’t a way to do this the way you are currently doing it. However if you plan to use the pencil icon on all your accordion items, you can use this CSS. You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

.x-accordion-heading .x-accordion-toggle:before {
    float:left; 
}

a.x-accordion-toggle:after {
    content: "\f040";
    float:left;
    padding:8px;
    margin-top:-6px;
    margin-right:10px;
    font-family:fontAwesome;
    line-height: 1;
    color: #fff;
    border-radius: 50em;
    font-size: 24px;
    width: 25px;
    height:24px;
    text-align: center;
    border: 4px solid #fff;
}

a.x-accordion-toggle.collapsed:before {
    float:left;
}

a.x-accordion-toggle {
    height: 70px;
}

a.x-accordion-toggle {
    padding-top: 17px!important;
}

Hope this helps – thanks!

[ChadParticipant]

Thanks but I was planning to use different icons for each accordion title. Is there a possible way for this?

[John EzraMember]

Hi there,

Thanks for updating the thread! Yes there is. You need to use the CSS provided above. Add a class to every accordion, add the following CSS template to modify them.

.x-accordion.yourClass a.x-accordion-toggle:after {
    content:"\f041";
}

Note: Change yourClass to any class you like. For the content, you can use FontAwesome Cheetshet to get the values: https://fortawesome.github.io/Font-Awesome/cheatsheet/

Just change the given value like so: [& #xf040;] => \f040 then you can add it as your content value. (Space was added after the ampersand so would show and not convert into a box)

Hope this helps – thanks!

[ChadParticipant]

It works! Thank you so much!

[Prasant RaiModerator]

You’re welcome! We are just glad we were able to help you out.

[Author]

Posts