Font Awesome icons not working

[Andy Corrigan]

Hi,

Using the free version of Font Awesome, I'm unable to get an icon showing within a command column on the grid. 

My grid structure is as follows:

<SfGrid @ref="studentGrid" ID="studentGrid" DataSource="students" RowHeight="30"
        AllowFiltering="true" AllowPaging="true" AllowSelection="true" AllowSorting="true"  class="studentSearchGrid" EnableHover="true"
        Toolbar="@(new List<object>() { "Print","ExcelExport","PdfExport","csvExport" })"
        AllowExcelExport="true" AllowPdfExport="true"
        ContextMenuItems="@(new List<object>() { "AutoFit", "AutoFitAll", "SortAscending", "SortDescending","Copy","PdfExport", "ExcelExport", "CsvExport", "FirstPage", "PrevPage","LastPage", "NextPage"})">
    <GridEvents TValue="spStudentSearchResult" OnToolbarClick="ToolbarClick" CommandClicked="OnCommandClicked" RowSelected="OnClicked"></GridEvents>
    <GridAggregates>
        <GridAggregate>
            <GridAggregateColumns>
                <GridAggregateColumn Field="StudentID" Type="AggregateType.Count">
                    <FooterTemplate>
                        @{
                            var aggregate = (context as AggregateTemplateContext);
                            <div>
                                <p>
                                    No Students:
                                    @if (aggregate != null)
                                    {
                                        @aggregate.Count
                                    }
                                </p>
                            </div>
                        }
                    </FooterTemplate>
                </GridAggregateColumn>
            </GridAggregateColumns>
        </GridAggregate>
    </GridAggregates>
    <GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.Menu"></GridFilterSettings>
    <GridPageSettings PageSize="10"></GridPageSettings>
    <GridSortSettings>
        <GridSortColumns>
            <GridSortColumn Field=@nameof(spStudentSearchResult.Lastname_Forenames) Direction="SortDirection.Ascending"></GridSortColumn>
        </GridSortColumns>
    </GridSortSettings>
    <GridColumns>
        <GridColumn HeaderText="Student ID">
            <Template>
                @{
                    var student = (context as spStudentSearchResult);
                    <SfTooltip SfTooltip.HtmlAttributes="HtmlAttribute" ShowTipPointer="true" Position="Syncfusion.Blazor.Popups.Position.RightCenter" Width="400">
                        <TooltipTemplates>
                            <Content>
                                <StudentMiniDetails student="@(student)"></StudentMiniDetails>
                            </Content>
                        </TooltipTemplates>
 
                        @student.StudentId
                    </SfTooltip>
                }
            </Template>
        </GridColumn>
        <GridColumn Field=@nameof(spStudentSearchResult.Lastname_Forenames) HeaderText="Name" ></GridColumn>
        <GridColumn Field=@nameof(spStudentSearchResult.DoB) HeaderText="DoB" Format="dd/MM/yyyy" Type="ColumnType.Date"></GridColumn>
        <GridColumn Field=@nameof(spStudentSearchResult.StudentStatus) TextAlign="TextAlign.Center" HeaderText="Status"  FilterSettings="@(new FilterSettings { Type = Syncfusion.Blazor.Grids.FilterType.CheckBox })">
            <Template>
                @{
                    student = (context as spStudentSearchResult);
                    if (student.StudentStatus.Contains("-Y"))
                    {
                        <div class="statustemp e-activecolor">
                            <span class="statustemp e-activecolor">@student.StudentStatus.Trim()</span>
                        </div>
                    }
                    else
                    {
                        <div class="statustemp e-inactivecolor">
                            <span class="statustemp e-inactivecolor">@student.StudentStatus.Trim()</span>
                        </div>
                    }
                }
            </Template>
        </GridColumn>
        @*<GridColumn Field="@nameof(StudentBasicDetailsWithCurrentTg.CodeList)" HeaderText="Staff Code List" Width="80px"></GridColumn>*@
        <GridColumn HeaderText="Add Tagged" TextAlign="TextAlign.Center" >
            <GridCommandColumns>
                <GridCommandColumn ButtonOption="@(new CommandButtonOptions() { CssClass="fa fa-bookmark"})" Title="Add Tagged Student"></GridCommandColumn>
            </GridCommandColumns>
        </GridColumn>
    </GridColumns>
</SfGrid>

But the command column shows up as: 

Using the developer tools it seems to be that it's not setting the content of the :before tag properly? 

[Vignesh Natarajan]

Hi Andy,  

 

Thanks for contacting Syncfusion support.  

 

Query: “Using the free version of Font Awesome, I'm unable to get an icon showing within a command column on the grid. ” 

 

We are able to reproduce the reported issue at our end also while preparing a sample using your code example. This is because you have defined the font icon class name in place of cssClass instead of IconCss property. Kindly modify the code to define the icon class name in place of IconCss property.  

 

Refer the below code xample and sample for your reference 

 

<SfGrid DataSource="@Orders" AllowPaging="true" Height="315"> 

    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true"></GridEditSettings> 

    <GridColumns> 

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="120"></GridColumn> 

        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" EditType="EditType.DatePickerEdit" Format="d" TextAlign="TextAlign.Right" Width="130"></GridColumn> 

        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

        <GridColumn HeaderText="Manage Records" Width="150"> 

            <GridCommandColumns> 

                <GridCommandColumn ButtonOption="@(new CommandButtonOptions() { IconCss="fa fa-bookmark"})" Title="Add Tagged Student"></GridCommandColumn>           

            </GridCommandColumns> 

        </GridColumn> 

    </GridColumns> 

</SfGrid> 

 

 

Sample: https://www.syncfusion.com/downloads/support/forum/170428/ze/DataGrid_Server535930351.zip  

 

Also refer the below screenshot for your reference 

 

 

 

Please get back to us if you have further queries.  

 

Regards, 

Vignesh Natarajan