Use the number (html entity, css before, etc..) instead of the <i> tag with a class name.

[braksator]

I'm used to working with font icons using the number, not the class name thing. I even would like to be able to search using the number. I think the name system these guys use is pretty bogus and the need for the list of thousands of lines of CSS when I'm using only a few of those icons is pretty over the top. It would be good if there was a mode where you could search using the number (or the existing keywords), the values displayed in the picker would not use the i tag - perhaps just display the html entity, the value that would be saved in the text input is the number. Then I can use that value however I like. Really to me the 'value' of a font icon is that number. Not the word.

[micc83]

Hi, @braksator thank you for your feedback. Unfortunately since version 2 of fontIconPicker was the result of a collaboration with another person, which is not in the project anymore, I cannot possibly keep addressing issues related with all the features that this third person added to the project. Hopefully someone else will step in.

Cheers, Alex

[braksator]

I understand, sorry to hear that mate, I've had the same thing happen to me. I wish I could contribute but I'm stretched pretty thin.

[braksator]

Infact this functionality already exists. The settings are:

useAttribute: true, // Defaults to false
attributeName : 'data-icon',   // This is the default value, no need to set this unless you want something else.

When you supply the icons to setIcons() make sure the values are the decimal (base 10) id of the icon. In my case using IcoMoon/LinearIcons selection.js I found it at (json data object).properties.code.

Then the i tag of each icon will contain a data-icon="" attribute with your value as a html entity based on the hex value which it automatically calculates.

The CSS to make the font appear will then be something like:

[data-icon]:before {
    font-family: icons; /* BYO icon font, mapped smartly */
    content: attr(data-icon);
    speak: none; /* Not to be trusted, but hey. */
    /* other styles you normally have on the icons */
}

I think the value stored to the textfield will be in decimal not the familiar hex value (this is actually ideal for database storage or what have you), but that is easy to convert with whatever language you have available to process that data at the other end upon display, like dechex() in PHP. Just output &#x[hex value]; in a data-icon attribute and you can reuse the CSS above.

[micc83]

Thank you @braksator, hopefully this will help someone else with the same issue.