Search code examples
htmlcssblazorfont-awesomeblazor-webassembly

Adding info icons after InputText or InputRadioGroup in Blazor app editform


I just want to add info icon "i" after InputRadioGroup of my Razor page. I tried out something but it's not working. Any suggestions here?

added link in index.html

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

added <i class="fa fa-info-circle"></i> in editform. Something like below:

                 <div class="form-group col">
                   <label>My Role in this trade</label><br />
                    <InputRadioGroup @bind-Value="model.Role" class="form-control">
                        @foreach (var option in rdOptions)
                        {
                            <InputRadio Value="option" /> @option
                            <text>&nbsp;&nbsp;</text>
                        }
                    </InputRadioGroup> <i class="fa fa-info-circle"></i>
                    <ValidationMessage For="@(() => model.Role)" />
                </div>

No error. But no info icon either.


Solution

  • I searched more into this. I was just wondering, even though all the links are correct why fonts are not working for me . I tried below solution which i found in other stackoverflow questions. Worked like a charm. I used chrome option. Hope this helps someone in future.

    Sometimes forced reload fixes the problem. You need to reload the browser's caché memory.

    Firefox: ctrl + shift + R
    Chrome: ctrl + right click on Chrome's reload button
    Edge: Same as Chrome, or ctrl + F5
    Other combinations can be found in the above provided link.