Question

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

<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。即

<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。通过函数获取char：

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>

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

2 个答案: