locked
How Do I use the flag icon css properly render in a span on a table RRS feed

  • Question

  • User-183185495 posted

    I tried to use the following to render my flag from flag icon.css but it didnt produce the image yet the css file is loaded on my site. 

    And displays else where fine its just the span I am having issues with getting it to render anyone no how.

    <span class="flag-icon flag-icon-{@item.Flag.ToLower()}"></span>

    <table class="table table-bordered table-condensed table-striped table-hover sortable">
    @if (Model.Count() == 0) {
    <tr>
    <td colspan="10">No Record's found.</td>
    </tr>
    
    } else {
    <thead>
    <tr class="danger">
    <th data-defaultsign="_19"> Ship Name</th>
    <th data-defaultsign="AZ">Company Name</th>
    <th>Flag</th>
    <th>Role</th>
    <th>Imo Number</th>
    <th>Actions</th>
    </tr>
    </thead>
    
    foreach (var item in Model) {
    <tr>
    <td>@item.Name</td>
    <td>@item.Companies.CompanyName</td>
    <td>
    <span class="flag-icon flag-icon-{@item.Flag.ToLower()}"></span>
    @item.Flag
    </td>
    <td>@item.Role</td>
    
    <td>@item.IMONumber</td>
    <td>
    
    <a asp-action="Edit" asp-controller="Vessels" class="btn btn-primary" asp-route-id="@item.Id">Edit</a> |
    
    <a href="#" class="btn btn-danger" data-id="@item.Id" onclick="deleteModal(@item.Id)" data-toggle="modal" data-target="#deleteLink"><i class="glyphicon glyphicon-trash"></i>Delete </a>
    
    
    
    
    </td>
    </tr>

    Wednesday, July 15, 2020 8:40 AM

Answers

  • User1686398519 posted

    Hi roguenidb,

    1. First, you need to make sure that you have added a folder called flags in the root directory of the project.
      • If you don’t have one, you can download it through this link, the folder named flags is inside.
    2. <span class="flag-icon flag-icon-{@item.Flag.ToLower()}"></span>
      • Modify this code as follows:, {} is not needed.
      • <span class="flag-icon flag-icon-@item.flag.ToLower()"></span>

    Here is the result.

    Best regards,

    Yihui Sun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, July 16, 2020 9:25 AM

All replies

  • User-474980206 posted

    Which icon library are you using?

    Wednesday, July 15, 2020 2:24 PM
  • User1686398519 posted

    Hi roguenidb,

    1. First, you need to make sure that you have added a folder called flags in the root directory of the project.
      • If you don’t have one, you can download it through this link, the folder named flags is inside.
    2. <span class="flag-icon flag-icon-{@item.Flag.ToLower()}"></span>
      • Modify this code as follows:, {} is not needed.
      • <span class="flag-icon flag-icon-@item.flag.ToLower()"></span>

    Here is the result.

    Best regards,

    Yihui Sun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, July 16, 2020 9:25 AM
  • User-183185495 posted

    Thanks i forgot we didnt need {} when dealing with spans got it presenting thank u 

    Hi roguenidb,

    1. First, you need to make sure that you have added a folder called flags in the root directory of the project.
      • If you don’t have one, you can download it through this link, the folder named flags is inside.
    2. roguenidb

      <span class="flag-icon flag-icon-{@item.Flag.ToLower()}"></span>
      • Modify this code as follows:, {} is not needed.
      • <span class="flag-icon flag-icon-@item.flag.ToLower()"></span>

    Here is the result.

    Best regards,

    Yihui Sun

    Thursday, July 16, 2020 6:33 PM