Not showing font awesome pro icons correctly

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>


2 Replies

SP Scott Peal April 13, 2020 02:05 PM UTC



AK Alagumeena Kalaiselvan Syncfusion Team April 14, 2020 12:22 PM UTC

  
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 


Loader.
Up arrow icon