在圖標選擇器中使用Unicode圖標

我試圖在我的應用程序中實現圖標選擇器，這將允許用戶選擇數學運算符進行數據比較。在圖標選擇器中使用Unicode圖標

我已經能夠在頁面上運行fontawesome-iconpicker，但我在圖標本身遇到問題。我可以沒有問題地使用glyphicons，但是我想使用的圖標在Unicode設置中，我不確定如何以圖標選擇器將會理解的方式引用它們。

在我的代碼，它定義了圖標選擇器中的數據集，我能得到glyphicons由他們的階級引用它們加載：

icons: ['glyphicon glyphicon-home', 'glyphicon glyphicon-repeat', 'glyphicon glyphicon-search', 
     'glyphicon glyphicon-arrow-left', 'glyphicon glyphicon-arrow-right', 'glyphicon glyphicon-star', '&lt;'],

此作品以同樣的方式，我將它們添加到我的index.jade文件中，我會在頁面上使用一個圖標。glyphicon.glyphicon-arrow-left

但是，我無法獲取unicode項目，如果點擊'<'應該是空白圖標，我得到這個錯誤：

Uncaught Error: Syntax error, unrecognized expression: .&lt; 
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），我避難無法從搜索中找到任何信息。我是否需要創建一些自定義CSS來將類分配給Unicode圖標？如果是這樣，我該怎麼做呢？

謝謝！

來源

2017-03-31 Paul Murray

我最終找到了解決方案。我爲我需要的每個符號創建了CSS類，並使用:before選擇器來指定在元素之前出現的內容。然後，我將字符串中Unicode字符的轉義十六進制值傳遞給樣式內的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"; 
}

然後能夠將這些類名稱傳遞給'圖標'數組。

來源

2017-03-31 19:20:05

在圖標選擇器中使用Unicode圖標

回答

相關問題