How to get char code of fontawesome icon?

Question

I'd like to use fontawesome icons in SVG scope. I cannot achieve it in common way, but I can add <text> element containing corresponding UTF-8 char and with font set to fontawesome, like that:

<text style="font-family: FontAwesome;">\uf0ac</text>

To make it clear I wrote a switch for getting useful icons:

getFontAwesomeIcon(name) {
    switch (name) {
      case 'fa-globe':
        return '\uf0ac'
      case 'fa-lock':
        return '\uf023'
      case 'fa-users':
        return '\uf0c0'
      case 'fa-ellipsis-h':
        return '\uf141'
      default:
        throw '# Wrong fontawesome icon name.'
    }
  }

But of course that's ugly, because I must write it myself im my code. How can I get these values just from fontawesome library?

Duplicate of https://stackoverflow.com/questions/27992992/i-need-list-of-all-class-name-of-font-awesome — Kevin Brown, Sep 01 '17 at 17:13
@KevinBrown - that's not the same. Author of that post want to have just a list of all icon names, but I'd like to get characters corresponding to these names. — Karol Selak, Sep 01 '17 at 17:36
https://ohmycheatsheet.com/fontawesome/ here you can use jquery get all possible values or in — Shiva, Mar 24 '20 at 02:43

score 1 · Answer 1 · answered Sep 01 '17 at 18:25

You can avoid producing such a list and extract the information from the font-awesome stylesheet on the fly. Include the stylesheet and set the classes like usual, i. e.

<tspan class="fa fa-globe"></tspan>

and you can do the following:

var icons = document.querySelectorAll(".fa");
var stylesheet = Array.from(document.styleSheets).find(function (s) {
    return s.href.endsWith("font-awesome.css");
});
var rules = Array.from(stylesheet.cssRules);

icons.forEach(function (icon) {
    // extract the class name for the icon
    var name = Array.from(icon.classList).find(function (c) {
        return c.startsWith('fa-');
    });

    // get the ::before styles for that class
    var style = rules.find(function (r) {
        return r.selectorText && r.selectorText.endsWith(name + "::before");
    }).style;

    // insert the content into the element
    // style.content returns '"\uf0ac"'
    icon.textContent = style.content.substr(1,1);
});

Hi, thanks for your solution! Indeed it was not working for me, but after some changes I got it :) You can find my version below, I think that's more universal. — Karol Selak, Sep 13 '17 at 08:29

Karol Selak · Accepted Answer · 2017-09-16T09:19:14.753

My two answers for two approaches to the problem (both developed thanks to ccprog):

1. Setting char by class definition:

In that approach we can define element that way:

<text class="fa fa-globe"></text>

And next run that code:

var icons = document.querySelectorAll("text.fa");
  // I want to modify only icons in SVG text elements
var stylesheets = Array.from(document.styleSheets);
  // In my project FontAwesome styles are compiled with other file,
  // so I search for rules in all CSS files

// Getting rules from stylesheets is slightly more complicated:
var rules = stylesheets.map(function(ss) {
  return ss && ss.cssRules ? Array.from(ss.cssRules) : [];
})
rules = [].concat.apply([], rules);

// Rest the same:
icons.forEach(function (icon) {
  var name = Array.from(icon.classList).find(function (c) {
      return c.startsWith('fa-');
  });
  var style = rules.find(function (r) {
      return r.selectorText && r.selectorText.endsWith(name + "::before");
  }).style;
  icon.textContent = style.content.substr(1,1);
});

But I had some problems with that approach, so I developed the second one.

2. Getting char with function:

const getFontAwesomeIconChar = (name) => {
  var stylesheets = Array.from(document.styleSheets);
  var rules = stylesheets.map(function(ss) {
    return ss && ss.cssRules ? Array.from(ss.cssRules) : [];
  })
  rules = [].concat.apply([], rules);

  var style = rules.find(function (r) {
    return r.selectorText && r.selectorText.endsWith(name + "::before");
  }).style;
  return style.content.substr(1,1);
}

Having that funcion defined we can do something like this (example with React syntax):

<text>{getFontAwesomeIconChar('fa-globe')}</text>

Flattening the array can be done [a bit more compact](https://stackoverflow.com/questions/10865025/merge-flatten-an-array-of-arrays-in-javascript#10865042) with `merged = [].concat.apply([], arrays)` — ccprog, Sep 13 '17 at 14:15

How to get char code of fontawesome icon?

2 Answers2