Not showing font awesome pro icons correctly

[Scott Peal]

When using the Font Awesome Pro multi-tone icons the accordian control does not show the icons correctly.

<ul class="fa-ul">

    <li><i class="fad fa-id-badge"></i> Brand with image only</li>

    <li><i class="fad fa-closed-captioning"></i> Brand with text only</li>

    <li><i class="fad fa-id-card"></i> Brand with image and text</li>

    <li><i class="fad fa-arrow-to-left"></i> Links container left</li>

    <li><i class="fad fa-arrow-to-right"></i> Links container right</li>

    <li><i class="fad fa-line-columns"></i> Mega menu</li>

    <li><i class="fal fa-text"></i> Text</li>

    <li><i class="fad fa-search"></i> Search</li>

</ul>

<div class="container">

    <div class="row">

        <div class="col">

            <div class="control-section">

                <div class="control_wrapper accordion-control-section">

                    <SfAccordion>

                        <AccordionItems>

                            <AccordionItem Expanded=true>

                                <HeaderTemplate>

                                    <i class="e-acrdn-header-icon fas fa-arrow-to-top"></i><span class="e-acrdn-header-content">Top Level</span>

                                </HeaderTemplate>

                                <ContentTemplate>

                                    <ul class="fa-ul">

                                        <li><i class="fas fa-id-badge"></i> Brand with image only</li>

                                        <li><i class="fas fa-closed-captioning"></i> Brand with text only</li>

                                        <li><i class="fas fa-id-card"></i> Brand with image and text</li>

                                        <li><i class="fad fa-arrow-to-left"></i> Links container left</li>

                                        <li><i class="fad fa-arrow-to-right"></i> Links container right</li>

                                        <li><i class="fad line-columns"></i> Mega menu</li>

                                        <li><i class="fal fa-text"></i> Text</li>

                                        <li><i class="fad fa-search"></i> Search</li>

                                    </ul>

                                </ContentTemplate>

                            </AccordionItem>

                            <AccordionItem Header="Menu Items" IconCss="e-water-game e-acrdn-icons">

                                <ContentTemplate>

                                    <ul>

                                        <li><span class="e-acrdn-icons e-content-icon dive"></span> Diving</li>

                                        <li><span class="e-acrdn-icons e-content-icon swimming"></span> Swimming</li>

                                        <li><span class="e-acrdn-icons e-content-icon marathan_swim"></span> Marathon Swimming</li>

                                        <li><span class="e-acrdn-icons e-content-icon sync_swim"></span> Synchronized Swimming</li>

                                        <li><span class="e-acrdn-icons e-content-icon waterpolo"></span> Water Polo</li>

                                    </ul>

                                </ContentTemplate>

                            </AccordionItem>

                        </AccordionItems>

                    </SfAccordion>

                </div>

            </div>

        </div>

    </div>

</div>

[Scott Peal]

[Alagumeena Kalaiselvan]

  

Hi Scott, 

Thanks for contacting Syncfusion support! 

We have validated your reported issue. We didn’t control the accordion’s icons inside the content. We suspect that the issue may occur due to override the accordion item styles.  

Kindly share your application-level styles that used to align the icons along with font reference, which help to reproduce the issue in our end.  

  

Regards 

Alagumeena.K