- character showing up after FontAwesome icon in .cshtml

Question

I have the following table in my razor view:

    <thead>
        <tr>
            <th>
                <span class="handicap-headers">@Html.DisplayNameFor(model => sampleModel.PlayerName)</span>
                <a asp-action="Index" asp-route-id="@Model.LeagueId" asp-route-sortOrder="@HandicapSortOrder.PlayerNameAsc" class="handicap-headers">
                    <i class="fas fa-sort-up bigger-fa-icons"></i>
                </a>
@*                <a asp-action="Index" asp-route-id="@Model.LeagueId" asp-route-sortOrder="@HandicapSortOrder.PlayerNameDesc">
                    <i class="fas fa-sort-down bigger-fa-icons"></i>
                </a>*@
            </th>
            <th>
                @Html.DisplayNameFor(model => sampleModel.Current)
            </th>
            <th>
                <span class="handicap-headers">@Html.DisplayNameFor(model => sampleModel.HandicapForDisplay)</span>
                <a asp-action="Index" asp-route-id="@Model.LeagueId" asp-route-sortOrder="@HandicapSortOrder.HandicapAsc" class="handicap-headers">
                    <i class="fas fa-sort-up bigger-fa-icons"></i>
                </a>
                <a asp-action="Index" asp-route-id="@Model.LeagueId" asp-route-sortOrder="@HandicapSortOrder.HandicapDesc">
                    <i class="fas fa-sort-down bigger-fa-icons"></i>
                </a>
            </th>
            <th></th>
        </tr>
    </thead>


    <tbody>
        @foreach (var item in Model.PlayerHandicaps)
        {
            <tr>
                <td>
                    <a asp-controller="PlayerScore" asp-action="Index" asp-route-playerId="@item.PlayerId" asp-route-leaguePadId="@item.LeaguePadId">@Html.DisplayFor(modelItem => item.PlayerName)</a>
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Current)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.HandicapForDisplay)
                </td>
            </tr>
        }
    </tbody>
</table>

For some reason, when I display the icons, I am getting this weird '-' char after the first icon. I have tried reordering the icons and it sticks to whichever is the first icon. Not sure what the issue is here or what I might be doing wrong.

FYI - I commented out one of the icons just for testing purposes. When I have just one icon, it doesn't have an issue. You can see the example of the '-' char in the last column

Answer 1

A closer look at the image in your post shows that the hyphen character (-) listed in the title and in the description of your post is actually an underline (_). That distinction helps identify the solution available to the issue you're seeing.

The reason you're seeing an underline appear when you use more than one icon within an anchor tag is because a space exists between the two icons. The underline appears in the space. The underline doesn't appear before or after the icon in the first <th> element because there are no spaces before or after the icon within the anchor element.

Tight HTML

If you entered your anchor elements without any spacing in your Razor page, the underline will not appear. For example:

... </i></a><a asp-action="Index" ...</a><i class="fas ...

display: flex

If your code editor performs a "tidy" operation on your HTML, then applying a CSS solution to remove white space when HTML is rendered in the browser is a better alternative. This SO post provides multiple options. A modern option is to use flexbox.

.fa-ico-container { display: flex; }

Use CSS .padding to add spacing between child anchor/icon elements within the icon container. (See code snippet below.)

text-decoration: none

Adding a CSS rule to remove the text decoration from the anchor elements containing a Font Awesome icon will resolve the visual oddity of an underline appearing.

th a { text-decoration: none; }

Compare methods above

The following code snippet compares the options above for removing the underline that appears between two Font Awesome icons.

#container-grid {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 1rem;
  width: fit-content;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.fa-ico-container.text-decoration-none a {
  text-decoration: none;
}


/* stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-inline-block-elements */

.fa-ico-container.no-whitespace-flexbox {
  display: flex;
}

.fa-ico-container.tight-html a,
.fa-ico-container.no-whitespace-flexbox a {
  padding: 2px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<div id="container-grid">
  <span>Underline (default)</span>
  <div class="fa-ico-container">
    <a href="/index">
      <i class="fas fa-sort-up bigger-fa-icons"></i>
    </a>
    <a href="/index">
      <i class="fas fa-sort-down bigger-fa-icons"></i>
    </a>
  </div>
  <span>Tight HTML</span>
  <div class="fa-ico-container tight-html">
    <a href="/index">
      <i class="fas fa-sort-up bigger-fa-icons"></i></a><a href="/index"><i class="fas fa-sort-down bigger-fa-icons"></i>
        </a>
  </div>
  <span>display: flex</span>
  <div class="fa-ico-container no-whitespace-flexbox">
    <a href="/index">
      <i class="fas fa-sort-up bigger-fa-icons"></i>
    </a>
    <a href="/index">
      <i class="fas fa-sort-down bigger-fa-icons"></i>
    </a>
  </div>
  <span>text-decoration: none</span>
  <div class="fa-ico-container text-decoration-none">
    <a href="/index">
      <i class="fas fa-sort-up bigger-fa-icons"></i>
    </a>
    <a href="/index">
      <i class="fas fa-sort-down bigger-fa-icons"></i>
    </a>
  </div>
</div>

April 9 2023 edit: After this answer was accepted, I added the CSS option (display: flex; and padding: 2px;) for removing white space between anchor elements. This solution is an alternative to using text-decoration: none; or removing white space (carriage returns) in your original HTML content.