剣道グリッドのawesomeフォントを使用

Question

私は剣道グリッドで素晴らしいフォントを使用しています。私は問題なく動作することを期待し、できるだけ良好に表示します。実際にアイコンをクリックすると（各アイコンに親があります）、ジャンプします。この問題の修正についてのご意見はありますか？ここで

私のコードです：

<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：

this linkを読んだ後、私は私のコードを変更：

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>" 
       } 

実際にはfa fa-checkを表示し、fontawesomeを表示しません。

Answer 1

フォントアイコンを表示するには、フォントだけでなく正しいCSSを表示して正しいアイコンを表示する必要があります。フォントを取得する方法はたくさんあるので、「正しいCSS」はすべての人にとって同じではありません。 http://fontello.comから入手できます。本当に必要なアイコンのみを選択できます（fontelloのような他のサービスもあります）。

フォントを入手した後あなたのサイトに実装する必要があります。あなたはすでにこの手順を実行して、@ font-faceを宣言して、あなたのkmアイコン（font：1em/1em "FontAwesome";）でフォントを使用しました。

最後に、あなたのkm-アイコンをfontelloから取得した場合は、CSSのすべてのUnicodeコードが格納されているdemo.htmlが表示されます。フォントワームサイトから取得する場合は、cheat sheetを使用します。開発者用ツールを使用してそこから直接アイコンをコピーして貼り付けることもできますが、CSSエディタにフォントがないので、asと表示されます。 （？またはまたは似たような、あなたが使用しているもののプログラムに応じて）

CSSで指定するもう一つの方法は、例えば、-notationである：それを追加する

.icon-example::before{ 
    content: '\e83e'; 
    font-family: "Font Awesome"; 
} 

最後の方法です彼らはフォントワームのサイトでそれをやったように、アイコンをHTMLに直接追加するために、私が先にリンクしていたすばらしいチートシートサイトを見てください。