HTML Knockout add FontAwesome icon into table using Unicode

Question

I have been working with Knockout and FontAwesome for a couple of days and I'm trying to display a FontAwesome icon using it's Unicode.

I have a list of items called alerts which contains different informations about an alert and one icon for it.

if (alerts.Category == 0)
    alerts['Category'] = '&#xf071;';
else if (element.Category == 1)
    alerts['Category'] = '&#xf129;';
else if (alerts.Category == 2)
    alerts['Category'] = '&#xf024;';
else if (alerts.Category == 3)
    alerts['Category'] = '&#xf0e5;';
else if (alerts.Category == 4)
    alerts['Category'] = '&#xf017;';

The thing is that when I'm trying to get them into the HTML page like:

<table class="table" id="alertstable">
 <tbody data-bind="foreach: alerts">
   <tr style: { backgroundColor: Color, color: TextColor }">
    <td>
      <button type="button" class="btn btn-default"
        data-bind="click:$root.GetAlertClick, text:VehicleShortName">
      22
      </button>
    </td>
    <td>
      <i style="font-family: 'FontAwesome', 'Helvetica'; font-size: 20px;" 
          data-bind="image:Category"></i>
    </td>
   </tr>
 </tbody>
</table>

It displays all the VehicleShortNames but it doesn't display the icon for each one of them. It is possible to display the icon in the table this way?

why are you not using font awesome with class such as... class="fa fa-whatever"? — An0nC0d3r, Oct 22 '15 at 13:38
use `data-bind="attr:{'image':Category}"` as image is not a valid in OP (hoping no custom binding exist) — super cool, Oct 22 '15 at 14:04
@AdamJeffers Thanks for your answer. It worked for me. Please write it as an answer so I can mark it as the correct one. — Alex Mihai, Oct 23 '15 at 07:40

score 1 · Accepted Answer · answered Oct 23 '15 at 08:29

1

On request from OP, heres the answer... you should be using class="fa fa-something" as your class name ;-)

answered Oct 23 '15 at 08:29

An0nC0d3r

1,275
13
33

score 0 · Answer 2 · edited May 23 '17 at 10:27

When you want to show an icon from a font icon, you just need to show the character text, and use the font icon to style it.

In your case, you're styling the text, but are not showing the text. You must change the binding like this:

<i style="font-family: 'FontAwesome', 'Helvetica'; font-size: 20px;" 
      data-bind="text:Category"></i>

If you still can't see it, try using the html binding, instead of text, like this:

<i style="font-family: 'FontAwesome', 'Helvetica'; font-size: 20px;" 
      data-bind="html"></i>

And finally, if you still have some problems, please check this SO answer which explains other possible reasons for which your icon isn't shown.

NOTE: your HTML have several defects, for example, the text shown in a <button> is the buttons value attribute. This syntax <tr style: { backgroundColor: Color, color: TextColor }"> is completely worng. And also your viewmodel doesn't look right

HTML Knockout add FontAwesome icon into table using Unicode

2 Answers2