CODEWITHSUNDEEP
javascriptcssunicodeiconsglyphicons
Paul Murray
Paul Murray

Reputation: 429

Using Unicode Icons in Icon Picker

I'm attempting to implement an icon picker in my app which will allow the user to chose a mathematical operator for data comparison.

I've been able to get the fontawesome-iconpicker working on the page but I'm having trouble with the icons themselves. I can use glyphicons without issue but the icons I want to use are in the Unicode set and I'm not sure how to refer to them in a way that the icon picker will understand.

In my code which defines the data-set for the icon picker, I'm able to get the glyphicons to load by referring to them by their class:

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

This works the same way that I would be adding them into my index.jade file, where I would put an icon on the page using .glyphicon.glyphicon-arrow-left

However, I can't get the unicode item to appear and if I click on the blank icon where the '<' should be, I get this error:

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)

I think the issue is that the icon picker needs to refer to icons by their class but I have no clue what the class would be for the Unicode icons (I'm trying to use a couple of these) and I haven't been able to find any information from searching. Do I need to create some custom CSS to assign classes to the Unicode icons? If so, how would I go about doing that?

Thanks!

Upvotes: 0

Views: 755

Answers (2)

j.davies
j.davies

Reputation: 2331

Although not directly what you are asking I've implemented a Font Awesome icon picker with radio buttons and no Javascript. You could use a similar approach to show your mathematical operators.

This is done by using the icons directly in the HTML and hiding the default radio button:

  <input type="radio" class="hide" id="radio-fa-plane" name="icon" value="plane">
    <label for="radio-fa-plane">
    <i class="fas fa-plane"></i>
  </label>

https://jsfiddle.net/wjgpmcs2/10/

Upvotes: 1

Paul Murray
Paul Murray

Reputation: 429

I ended up finding a solution. I created CSS classes for each symbol I needed and used the :before selector to specify content that would appear before the element. I then passed the escaped hexadecimal values of the Unicode characters in as strings to the content attribute within the style. The code ended up looking like this:

/* 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";
}

and was then able to pass these class names to the 'icons' array.

Upvotes: 0

Related Questions