[Resolved] Add Icon into HTML Code

[Jeffrey]

Hello,

I’m trying to insert an icon next to a WordPress Header in HTML.

I use GenerateBlocks and would usually use the Headline block, though I’m trying to build an Accordion with the Accordion Blocks Plugin, and it only works with WordPress Headers.

Please see screen shot here of what I want to achieve:<img src="http://awajigolf.jp/wp-content/uploads/2022/06/Screen-Shot-2022-06-06-at-1.34.55-PM.png" alt="Icon Placement" />

And HTML here:

<div class="wp-block-pb-accordion-item c-accordion__item js-accordion-item no-js" data-initially-open="false" data-click-to-close="true" data-auto-close="true" data-scroll="false" data-scroll-offset="0"><h5 id="at-442" class="c-accordion__title js-accordion-controller" role="button">プリペイドカード精算と現金精算はどちらがお得ですが？</h5><div id="ac-442" class="c-accordion__content"><!-- wp:paragraph -->
<p>Answer</p>
<!-- /wp:paragraph --></div></div>

Could you please tell me where the code for the icon should go in this HTML?

Thank you!
Jeffrey

[Fernando]

Hi Jeffrey,

You may add a Headline Block with the Container Block where the Accordion is.

Then add class accordion-container to the Container Block as such: https://share.getcloudapp.com/ApuXyY22

Then, add this CSS in Appearance > Customize > Additional CSS:

.gb-container.accordion-container>.gb-inside-container {
    display: flex;
}

Kindly let us know how it goes!

[Jeffrey]

Hi Fernando,

Thanks for your timely response.
I tried the above solution and it didn’t seem to work (please see website page for reference). To confirm – I should be using this instead of the Accordion Item block that I’m currently using?

[David]

Hi there,

are the Icons for the Headings the same for each question ?

[Jeffrey]

Hi David,

Yes, the icons for the headings will be the same for each question.

[Fernando]

I see. Here’s a CSS you may try adding in Appearance > Customize > Additional CSS:

.wp-block-pb-accordion-item:before {
    color: #777;
    content: "\2192";
    font-weight: 300;
    display: block;
    float: left;
    margin: 0 6px 0 0;
}

You may replace \2192 with the icon/symbol you wish to use:https://www.toptal.com/designers/htmlarrows/arrows/

Kindly let us know how it goes.

[Jeffrey]

That worked perfectly! Thank you!
I know it’s been said before, but an accordion block would be a fantastic addition to GenerateBlocks 🙂

[Fernando]

You’re welcome Jeffrey! You can comment a +1 here https://community.generateblocks.com/t/tabs-accordion-video-modal-gallery/32/17 with regards to having an Accordion Block so our developers would know and consider which feature our customers are wanting most. 🙂

[Author]

Posts