How to Use Data Attributes with Font Awesome

How to use data attributes with Font Awesome?

Although the question may duplicate to this post. In a simple word - you'll need to use HTML entity, or the unicode character itself, in order to use it in CSS content property.

However it's a very interesting idea to use the technique with Font Awesome, so I'm writing this answer, and adding the extra info for it.

I'd suggest to use data attributes data- instead of rel, as rel is designed for link types.

And on this page has a complete set of Font Awesome unicode tables. You can either copy/paste the unicode character, or the icon itself. Examples below:

@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css");
a::before {  font-family: 'FontAwesome';  content: attr(data-fa-icon);}

<p><a href="#" data-fa-icon=""> Unicode example</a></p><p><a href="#" data-fa-icon=""> Icon example</a></p>

How to pass fontAwesome icon to CSS content via data attribute

Use ng-class, much easier to do this:

<div
    ng-init="showAccordionDetail = false"
    class="accordion--title"
    ng-click="showAccordionDetail = !showAccordionDetail" 
    ng-class="{true:'fa fa-angle-down', false: 'fa fa-angle-right'}[showAccordionDetail]">
        click me
</div>

fontawesome attributes not updating with jquery

See Update Below...

Original answer:

This behavior comes from a combination of the use of the 'this' keyword and the way that the animated font-awesome icons are handled. As we discussed in the comments, it replaces the tag with an one, however, in reading through their documentation I saw that it does so with each change, it's very dynamic.

The problem is that when you pass the 'this' keyword into your ajax context, you're locking in that instance of the svg control, but it is replaced after that. So when you return 'this' you see that the class has changed successfully on the old control, but the new control remains having the spinner.

The solution to this is to use "$('[data-fa-i2svg]')" instead of "$('this')" in your success callback function. That targets the current control.

I found this solution here:

https://fontawesome.com/how-to-use/svg-with-js

It states "If you absolutely need to attach events to the icon you can use the data-fa-i2svg attribute but you need to allow for the dynamic creation of the svg element."

Update:

Using the "$('[data-fa-i2svg]')" selector doesn't work if you have multiple icons on the same page, as it will update them all.

You can set a font awesome property that will nest the svg inside the original and then use a selector to get the child of that tag. This works, however I think GrumpyCrouton's adaptation of just using the $('#taskid-'+uidOfTask); is probably more elegant in this situation.

Since this is marked as the solution I'm including his code below, but see his answer for further detail.

success: function(response) { 
    var element = $('#taskid-'+uidOfTask);
    element.attr('data-icon', 'check-square').removeClass("fa-pulse");
    if(response == 1) {
        element.attr('data-prefix', 'far');
    } else {
        element.attr('data-prefix', 'fas');
    }
} 

The effect of attribute data-auto-a11y in Font Awesome 5

Diving into the Font Awesome code on GitHub, in particular at /js/fontawesome.js first of all the data-auto-a11y attribute is mapped to a property autoA11y. Searching for that through the code it looks like this property governs if various aria- attributes are set, specifically if autoA11y is true and there is a title attribute then aria-labelledby is set, otherwise aria-hidden is set.

So, if you care about accessibility (and I think everybody should) then it does matter. However, I would also add that, on other lines of the code, it seems to indicate that this being set to true is the default. I would suggest you probably don't need it, however it would certainly in that case be harmless.

Caveat: I know nothing a priori about the internal workings of Font
Awesome, this is just based on an analysis of the code.

Font Awesome code snippets

Default settings (line 257)

  var _default = {
    familyPrefix: DEFAULT_FAMILY_PREFIX,
    replacementClass: DEFAULT_REPLACEMENT_CLASS,
    autoReplaceSvg: true,
    autoAddCss: true,
    autoA11y: true,
    searchPseudoElements: false,
    observeMutations: true,
    mutateApproach: 'async',
    keepOriginalSource: true,
    measurePerformance: false,
    showMissingIcons: true
  };

Uses of autoA11y. (Line 1605)

  function attributesParser (node) {
    var extraAttributes = toArray(node.attributes).reduce(function (acc, attr) {
      if (acc.name !== 'class' && acc.name !== 'style') {
        acc[attr.name] = attr.value;
      }

      return acc;
    }, {});
    var title = node.getAttribute('title');

    if (config.autoA11y) {
      if (title) {
        extraAttributes['aria-labelledby'] = "".concat(config.replacementClass, "-title-").concat(nextUniqueId());
      } else {
        extraAttributes['aria-hidden'] = 'true';
        extraAttributes['focusable'] = 'false';
      }
    }

    return extraAttributes;
  }

and line 1874

    if (config.autoA11y && !title) {
      extra.attributes['aria-hidden'] = 'true';
    }

and finally line 2291

      if (config.autoA11y) {
        if (title) {
          attributes['aria-labelledby'] = "".concat(config.replacementClass, "-title-").concat(nextUniqueId());
        } else {
          attributes['aria-hidden'] = 'true';
          attributes['focusable'] = 'false';
        }
      }

Use FontAwesome icon inside a ::before pseudo element with attr()

Try with Unicode

CSS escape sequences only work within CSS strings. When you take a CSS escape sequence from an HTML attribute (i.e. outside of CSS), it will be read literally, not interpreted as part of a CSS string.

If you want to encode the character within an HTML attribute, you need
to encode it as an HTML entity.

you should add "&#x" before your font-Awesome icon code. ie, if you want to use /f086, then write  instead

get the unicode from here - https://fortawesome.github.io/Font-Awesome/cheatsheet/

UPDATE

If you are using fontAwesome 5, change font-family: "FontAwesome"; to font-family: 'Font Awesome 5 Free';

div:before {  content: attr(data-background-icon);  font-family: "FontAwesome";}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/><div data-background-icon=''></div>

using font-awesome in fnCreatedCell

You're adding HTML so you supply the string to the html property, instead of text in the object initialiser:

'html': '<i class="fa fa-edit fa-fw"> </i>'

Switch between icons when using FontAwesome 5.0 SVG Framework

Font Awesome 5.0.0 has just been released and the migration from 4.7 to 5.0 wrecked up my javascript/jquery to change a "fa-star-o" icon to "fa-star" when the user clicks on it.

I managed to fix it so I wanted to share with you these two tips:

The icon in HTML:

<i class="foo fas fa-star"></i>

1) Change icon with jQuery (from "star" to "alarm-clock" and vice versa):

var icon = $('.foo');
var icon_fa_icon = icon.attr('data-icon');

if (icon_fa_icon === "alarm-clock") {
    icon.attr('data-icon', 'star');
} else {
    icon.attr('data-icon', 'alarm-clock');
}

2) Change icon-style with jQuery (from 'fas' to 'far'):

var icon = $('.foo');
var icon_fa_prefix = icon.attr('data-prefix');

if (icon_fa_prefix === 'fas') {
    icon.attr('data-prefix', 'far');

} else {
    icon.attr('data-prefix', 'fas');
}

Hope that helps anyone with the same issue.

---

Related Topics