アイコンピッカーでUnicodeアイコンを使用する

Question

私は、ユーザーがデータ比較のために数学的演算子を選ぶことを可能にするアイコンピッカーをアプリケーションに実装しようとしています。

私はこのページでfontawesome-iconpickerを動作させることができましたが、アイコン自体に問題があります。グリフコンは問題なく使用できますが、使用したいアイコンはUnicodeセットにあり、アイコンピッカーが理解する方法でそれらを参照する方法がわかりません。アイコンピッカーのためのデータ・セットを定義して、私のコードで

、私は自分のクラスでそれらを参照することにより、ロードするためにglyphiconsを取得することができるよ：

icons: ['glyphicon glyphicon-home', 'glyphicon glyphicon-repeat', 'glyphicon glyphicon-search', 
     'glyphicon glyphicon-arrow-left', 'glyphicon glyphicon-arrow-right', 'glyphicon glyphicon-star', '<'], 

これは、同じように動作しているI .glyphicon.glyphicon-arrow-leftを使用してページにアイコンを追加するindex.jadeファイルにそれらを追加します。

しかし、私はユニコードアイテムを表示することはできません。空白のアイコン '<'が表示されるはずです。このエラーが表示されます。

Uncaught Error: Syntax error, unrecognized expression: .< 
at Function.Sizzle.error (jquery.js:1580) 
at Sizzle.tokenize (jquery.js:2232) 
at Function.Sizzle [as find] (jquery.js:854) 
at jQuery.fn.init.find (jquery.js:2922) 
at c._updateComponents (fontawesome-iconpicker.js:796) 
at c.update (fontawesome-iconpicker.js:972) 
at HTMLAnchorElement.c (fontawesome-iconpicker.js:522) 
at HTMLAnchorElement.dispatch (jquery.js:5206) 
at HTMLAnchorElement.elemData.handle (jquery.js:5014) 

アイコンピッカーがクラスによってアイコンを参照する必要があると思うが、クラスがUnicodeアイコンのためにどのようなものになるかわからない（私はtheseを使用しようとしている）検索から何らかの情報を見つけることができました。クラスをUnicodeアイコンに割り当てるカスタムCSSを作成する必要がありますか？もしそうなら、私はそれをどうやってやりますか？

ありがとうございます！

Answer 1

解決策が見つかりました。必要なシンボルごとにCSSクラスを作成し、要素の前に表示されるコンテンツを指定するためにセレクタ:beforeを使用しました。その後、エスケープされたUnicode文字の16進値を文字列としてスタイル内のcontent属性に渡しました。コードは次のようになりました。

/* Unicode icons for mathematical operators */ 
.lessThan:before { 
    content: "\3c"; 
} 
.greaterThan:before { 
    content: "\3e"; 
} 
.lessThanEqual:before { 
    content: "\2264"; 
} 
.greaterThanEqual:before { 
    content: "\2265"; 
} 
.equalTo:before { 
    content: "=="; 
} 
.notEqualTo:before { 
    content: "\2260"; 
} 

これらのクラス名を 'icons'配列に渡すことができました。