How to display Font Awesome icons in select options using tag helper or html helper?

Question

I have followed the answers in this question, but I just get the character codes, e.g.  in plain text in my <option>s.

In my controller, I populate the items for the SelectList:

public IActionResult Create()
{
    ViewData["Icons"] = IconsDropdown();
    return View();
}

private SelectList IconsDropdown()
{
    List<ListItem> list = new List<ListItem>()
    {
        new ListItem{ Text = "&#xf007;", Value = "fa-user" },
        new ListItem{ Text = "&#xf508;", Value = "fa-user-tie" },
        // and so on...
    };
    return new SelectList(list, "Value", "Text");
}

class ListItem
{
    public string Text { get; set; }
    public string Value { get; set; }
}

And then I assign the list items to the select in the view:

<select asp-for="Icon" class="form-control select-fontawesome" asp-items="ViewBag.Icons">
    <option selected disabled value="">Choose icon</option>
</select>

I tried removing the class form-control too, but it's the same result.

The CSS to set the font:

.select-fontawesome {
    font-family: 'FontAwesome', 'sans-serif';
}

If I try to display FontAwesome icons in normal text, it works:

<span class="fas fa-user"></span>

Update

Thanks to @MBaas for pointing out that I need the fa-class on the <select> and style="font-weight:900;" on the <option>s.

But using the tag-helper, there is no way of setting style on the <option>s, so the solution isn't working.

I have been looking for a way of using @Html.DropDownListFor() instead of the tag-helper, but so far I haven't found that it will let me add css styling to the <option>s. I can set a class on the <select>-tag, but that's all:

@Html.DropDownListFor(m => 
    m.Icon, 
    ViewBag.Icons, 
    "Choose icon", 
    new { @class= "form-control fa" })

What CSS styles are you are trying to set? ... Be aware that form elements are pretty much impossible to style using CSS, and `option` may be the worst, as almost nothing can be done with it, and using e.g. tag helpers won't overcome that. — Asons, Jul 04 '20 at 21:20
Is this what you are looking for: https://stackoverflow.com/questions/104458/applying-styles-to-listitems-in-checkboxlist — Asons, Jul 04 '20 at 21:34
@Ason None of the two other questions cover what I'm asking for. Please reopen my question. — Stian, Jul 05 '20 at 05:16
1: Yes, the first dupe question talks about a `CheckBoxList` but the answer applies to a dropdown as well. -- 2: It is not because of the other two _questions_ it were closed as a dupe, it is because their answers solve your problem, which you clearly stated were "I'm trying to set `font-weight:900`", and that is done with the `Attributes.Add` method, which again works for several kinds of `ListItem`s. — Asons, Jul 05 '20 at 11:01
@Ason `ListItem` is my own class, and it does not have an `Attributes.Add` method. — Stian, Jul 05 '20 at 16:02
Voted to reopen your question, though since you removed the `css` tag it now takes 2 more votes (or someone with a gold badge in `c#` or `asp.net-core-mvc`) — Asons, Jul 05 '20 at 18:51
And have a look at this post, pretty sure you find you answer there: https://stackoverflow.com/questions/34624034/select-tag-helper-in-asp-net-core-mvc?rq=1 ... and if, I'll change the dupe link to it (if you add the `css` tag back) — Asons, Jul 05 '20 at 19:08
Noticed you added back the `css` tag, so I added the link from my previous comment as the first duplicate link (and kept the other for old .NET Framework users) — Asons, Jul 05 '20 at 20:11

MBaas · Answer 1 · 2020-07-05T10:12:29.997

0

I have seen examples that seemed to work w/o any additional CSS or classes - but somehow I can produce something along those lines. But the following worked and works for me ;)

Apply class fa to the select control (that bit comes with FontAwesome) and then some styling for the options to make sure they are styles with font-weight: 900. fadoes that as well, but it seems to be overridden by the browser's settings. Our settings then overrides the browser.

   <link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet"/>
<style>
select.fa option {font-weight: 900}
</style>
<select name="sample" id="sample" class="fa">
        <option value="">Choose icon</option>
        <option value="fa-user">&#xf007;</option>
        <option value="fa-user-tie">&#xf508;</option>    
</select>

edited Jul 05 '20 at 10:12

answered Jul 04 '20 at 08:46

MBaas

7,248
6
44
61

Thanks for the `fa` class on the ` – Stian Jul 04 '20 at 20:37
1

I have updated the answer and added a style which takes care of those options. So even the unstyled options display correctly now! – MBaas Jul 05 '20 at 06:55
I guess that would solve it if it weren't for the fact that the Asp html-renderer translates `&` to `&`. I just realised that now. The options look like this: ``. – Stian Jul 05 '20 at 08:25
Updated the answer again to describe the approach a bit better. Stupid that the renderer decides to overwrite. Anc chance to run some JS to inject the desired content? (Duh, lots of crutches...) – MBaas Jul 05 '20 at 10:14
@Stian and MBaas -- The OP ask how to set styles using _tag helper_ or _html helper_, and no where does your answer show how to do that. They also explicit in their "question edit" states: _But using the tag-helper, there is no way of setting style on the ` – Asons Jul 05 '20 at 11:09

How to display Font Awesome icons in select options using tag helper or html helper?

1 Answers1