如何获取 fontawesome 图标的字符代码？

Question

我想在 SVG 范围内使用 fontawesome 图标。我无法以常见的方式实现它，但我可以添加包含相应 UTF-8 字符且字体设置为 fontawesome 的 <text> 元素，如下所示：

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

为了清楚起见，我写了一个开关来获取有用的图标：

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.'
    }
  }

但这当然很难看，因为我必须自己编写代码。如何仅从 fontawesome 库中获取这些值？

Answer 1

您可以避免生成这样的列表，并即时从字体很棒的样式表中提取信息。包括样式表并像往常一样设置类，i。 e.

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

您可以执行以下操作：

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);
});

Answer 2

我对解决该问题的两种方法的两个答案（均由 ccprog 开发）：

1.按类定义设置 char：

在这种方法中，我们可以这样定义元素：

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

然后运行该代码：

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);
});

但我在使用这种方法时遇到了一些问题，所以我开发了第二种方法。

2。使用函数获取字符：

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);
}

定义了该函数后，我们可以执行以下操作（使用 React 语法的示例）：

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