How to make toolbar bigger?

[Scott Peal]

How do we increase the size of the toolbar icons? Note I am using Font Awesome fonts. Seems the fa-10x is not working to make the icon 10x larger. BTW, we prefer to use Font Awesome and not Syncfusion e-icons. Thanks

    <EjsToolbar>

        <ToolbarItems>

            <ToolbarItem PrefixIcon="fas fa-list-ul fa-10x" TooltipText="Back to search page"></ToolbarItem>

            <ToolbarItem PrefixIcon="fas fa-fast-backward" TooltipText="Start of records"></ToolbarItem>

            <ToolbarItem PrefixIcon="fas fa-caret-left" TooltipText="Previous record"></ToolbarItem>

            <ToolbarItem PrefixIcon="fas fa-caret-right" TooltipText="Next record"></ToolbarItem>

            <ToolbarItem PrefixIcon="fas fa-fast-forward" TooltipText="Last record"></ToolbarItem>

            <ToolbarItem Type="@ItemType.Separator"></ToolbarItem>

            <ToolbarItem PrefixIcon="far fa-save" TooltipText="Save record"></ToolbarItem>

            <ToolbarItem PrefixIcon="far fa-trash-alt" TooltipText="Delete record"></ToolbarItem>

            <ToolbarItem Text="Stuff"></ToolbarItem>

        </ToolbarItems>

    </EjsToolbar>

[Scott Peal]

Nevermind, I see how to do it with the template:

            <ToolbarItem TooltipText="Back to search page">

                <Template>

                    <div>

                        <span class="fas fa-list-ul fa-3x" @onclick="ToggleShowDetail"></span>

                    </div>

                </Template>

            </ToolbarItem>

[Nevitha Ravi]

Hi Scott, 

Greetings from Syncfusion Support. 

We have checked the shared code in which you have used wrong class name to have font awesome list icons. Please refer the following sample. 

https://www.syncfusion.com/downloads/support/forum/149925/ze/ToolbarBiggerIcon-976268107  

<EjsToolbar> 

    <ToolbarItems> 

        <ToolbarItem TooltipText="Back to search page"> 

            <Template> 

                <div> 

                    <span class="fa fa-list-ul fa-3x" @onclick="ToggleShowDetail"></span> 

                </div> 

            </Template> 

        </ToolbarItem> 

        <ToolbarItem Type="@ItemType.Separator"></ToolbarItem> 

        <ToolbarItem CssClass="fa fa-fast-backward fa-5x" TooltipText="Start of records"></ToolbarItem> 

        <ToolbarItem Type="@ItemType.Separator"></ToolbarItem> 

        <ToolbarItem CssClass="fa fa-caret-left" TooltipText="Previous record"></ToolbarItem> 

        <ToolbarItem CssClass="fa fa-caret-right" TooltipText="Next record"></ToolbarItem> 

        <ToolbarItem CssClass="fa fa-fast-forward" TooltipText="Last record"></ToolbarItem> 

        <ToolbarItem Type="@ItemType.Separator"></ToolbarItem> 

        <ToolbarItem CssClass="fa fa-save" TooltipText="Save record"></ToolbarItem> 

        <ToolbarItem CssClass="fa fa-trash-alt" TooltipText="Delete record"></ToolbarItem> 

        <ToolbarItem Text="Stuff"></ToolbarItem> 

    </ToolbarItems> 

</EjsToolbar> 

@code { 

    public void ToggleShowDetail() 

    { 

 

    } 

} 

 

Note: Use CssClass instead of PrefixIcon if incase you haven’t use template option. 

Please try the sample and get back to us if you need any further assistance. 

Regards, 

Nevitha