Using Font awesome in Kendo grid - css

Question

I use Font awesome in Kendo grid. I expect to work without problems , it shows as good as possible , Actually if I click on icon (each icon has parent) it will jump. Any idea about fixing this issue?
Here is my code:
<kendogrid
entity_id='restaurantId'
fields="{restaurantId: {editable: false, nullable: true},rgn: {required: true},type: {required: true},url: {editable: false, nullable: true}}"
controller="restaurant"
tools='false'
colmns='[
{
field: "restaurantId",
title: "id",
width: "100px",
locked: true,
lockable: true,
},
{
field: "type",
title:"type ",
width: "120px",
lockable: true,
minScreenWidth: 500,
sortable :false
},
{
field:"restaurantRateAverage" ,
title:"average ",
width: "80px",
lockable: true
},
{
title: "operation",
width: "110px",
lockable: true,
template: "
<a class=\"warning-color knd-custom-action-btn\" href=\"\\#/foods/add/${restaurantId}\" ><i class=\"fa fa-cutlery\"></i></a>
<a class=\"primary2-color knd-custom-action-btn\" href=\"\\#/delivery-zones/add/${restaurantId}/${restaurantCityId}\" ><i class=\"fa fa-map-marker\"></i></a>
<a class=\"danger-color knd-custom-action-btn k-grid-delete show-${restaurantId}\" href=\"\\#\"><span class=\"fa fa-times\"></span></a>
"
}
]'
hard-delete="true"
></kendogrid>
EDITED :
After reading this link I changed my code :
css :
#font-face {
font-family: "FontAwesome";
/*public/app/admin/assets/fonts/fontawesome-webfont.woff */
src: url("../fonts/fontawesome-webfont.woff") format("woff"),
url("../fonts/fontawesome-webfont.woff") format("truetype");
}
.km-icon:after,
.km-icon:before
{
font: 1em/1em "FontAwesome";
}
html:
{
field:"restaurantRateAverage" ,
title:"average ",
width: "80px",
lockable: true,
template: "<div data-role=\"tabstrip\">
<a data-icon=\"fa fa-check\"> </a></div>"
}
Actually it print fa fa-check and doesn't show fontawesome.

Answer 1

To display font-icons you need not only the font but also the correct CSS to display the correct icon. The "correct CSS" is not the same for everyone, since there are many ways to get the font.
You can get it from http://fontello.com and only select icons you really need (there are also some other services like fontello, I would advise to use on of them to only select the icons you really need)
After you get your font you have to implement it in your site. You already did this step, you declared a #font-face and used the font on your km-icon (font: 1em/1em "FontAwesome";)
Finally you need to say which icon to display for your km-icon, if you get the icons from fontello, you get a demo.html where all the unicode-codes for your CSS are stored, if you get it from the fontawesome site use this cheat sheet. You can either copy-paste the icon directly from there with the developer-tools, but since you don't have the font in your css-editor it will show up as . (or a ? or something similar, depending on what program you use)
Another way to specify it in the CSS is with the -notation, for example:
.icon-example::before{
content: '\e83e';
font-family: "Font Awesome";
}
The last way to add it is to do it like they did it on the fontawesome-site, to add the icon directly into the html, have a look at the font-awesome cheat-sheet site i linked earlier to see what I mean.