We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
  1. Home
  2. Forum
  3. Blazor
  4. How to make toolbar bigger?

How to make toolbar bigger?

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>

2 Replies
SP Scott Peal December 14, 2019 05:52 PM UTC

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>

NR Nevitha Ravi Syncfusion Team December 16, 2019 12:43 PM UTC

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. 

<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 


Loader.
Up arrow icon