Kendo 그리드의 awesome 글꼴 사용

Question

나는 Kendo 그리드에서 font awesome을 사용합니다. 나는 문제없이 일할 것으로 기대한다. 가능한 한 좋은 것을 보여준다. 실제로 아이콘을 클릭하면 (각 아이콘에 부모가 있음) 점프한다. 이 문제를 해결하는 방법에 대해 알고 싶습니다.

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 :

내 코드를 변경 this link을 읽은 후

:

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

편집 : 여기

내 코드입니다

   { 
        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 아이콘에 글꼴을 사용했습니다 (글꼴 : 1em/1em "FontAwesome";)

마지막으로 km- 아이콘을 fontello에서 가져온다면 fontohesome 사이트에서 가져온다면 demo.html에 CSS의 모든 유니 코드 코드가 저장되는 곳이 있습니다. cheat sheet을 사용하십시오. 개발자 도구를 사용하여 직접 아이콘을 복사하여 붙여 넣을 수도 있지만 CSS 편집기에 글꼴이 없으므로 show로 표시됩니다.

는 CSS에서이를 지정하는 또 다른 방법 (?하거나 또는 비슷한, 당신은 무엇을 사용 프로그램에 따라하는) 예를 들어, 표기법 함께 :

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

마지막 방법은 그것이 추가 그들이 fontawesome 사이트에서 그랬던 것처럼, HTML에 직접 아이콘을 추가하기 위해, 폰트를 보아라. 이전에 내가 링크 한 멋진 시트 시트 사이트를 보았다.