Font-Awesome Unicode Icon in Hash Icon

Question

(일반 문제 : 드롭 다운 항목에 컬러 아이콘 (사각형)을 표시해야합니다. 색상은 동적으로 결정되며 모양은 항상 사각형입니다. 알려주세요)

아이콘을 드롭 다운에 표시해야하지만 거기에 이미지를 배치하기가 어렵고 옵션에 I 태그를 넣을 수 없기 때문에 추가 옵션을 사용하고 있습니다. 글꼴 굉장 (FA) 유니 코드 이미지.

아래와 같이 각 옵션에 'fa-square'을 추가해야합니다.

$.each(items, function(i, item) { 
    $('#dropdown').append($('<option></option>').val(item.itemID).html('&#xf0c8; ' + itemTitle)); 
}); 

그러나이 상관없이 나는 파이어 폭스를 무엇을 다음 없기 때문에 내 옵션 값 동적 배열에서 발생하는

f0c8  ->  

http://fontawesome.io/icon/square/

, 내가 추가하고 있습니다에 따르면 해당 코드 아래입니다 다음 해시 이미지를 보여줍니다. 상황이 나는 시도했다 :

1) 선택을 확인이 폰트 - 굉장 폰트 패밀리

<select id="dropdown" style="font-family: 'Font-Awesome'"> 

(이것은, https://github.com/FortAwesome/Font-Awesome/issues/996 여기에 제안했다)

2) 확인해야 옵션에는 모든 옵션에 대해 fa 클래스가 있습니다.

$('#dropdown').append($('<option class="fa"></option>').val(item.itemID).html('&#xf0c8; ' + itemTitle)); 

Font-Awesome CSS가로드되어 프로젝트에서 사용할 수 있습니다. 이견있는 사람?

Answer 1

이제 내 드롭 다운에 선택 2 플러그인을 사용하고 있습니다. Select2의 templateResult/templateSelection 서식 지정 방법을 사용하여이 작업을 수행 할 수있었습니다.

$('#dropdown').select2(
            templateResult: format, 
            templateSelection: format, 
            escapeMarkup: function (m) { 
              return m; 
            } 
           }); 

function format(option) { 
    var color = $(option.element).attr('data-color'); 
    return '<i class="fa fa-square" style="color : ' + color + '"></i> ' + option.text; 
}; 

주 내 옵션의에있는 data-color ATTR,이 선택 2의 서식을 참조 함수 내에서 검색이 개별 상자 색상을 확인할 수 있습니다.

<option data-color="..."></option>