Changing CSS Unicode Content Property Dynamically

Question

I am setting up a background in a div tag that is a font awesome icon in each row of a table. This icon depends on the object that is being displayed. I tried setting up the code similar to Changing CSS content property dynamically. However, my data-content would be a unicode. I am assigning the values in an angular controller as follows:

if (type) {
    if (type.image.includes('fa-hand-o-up')) {
        type.background = '\f0a6';
    } else if (type.image.includes('fa-wrench')) {
        type.background = '\f0ad';
    } else if (type.image.includes('fa-star')) {
        type.background = '\f005';
    }            
    return type;
}

and then including them in the table as follows:

<td>
    <div class="text-center type-wrapper" 
         data-content="{{::dataItem.type.background}}">
        <span class="bold">{{::dataItem.type.name}}</span>
    </div>
</td>

However, this just puts 0a6, 0ad, and 005 as the background 'image'. Is there a way to add unicode content dynamically or is the attr(data-xxx) just for plain text?

Also, I tried adding a attr(data-color) for color, but that doesn't seem to work either. Is that also because I am using hex code instead of plain text?

http://stackoverflow.com/questions/36197443/use-fontawesome-icon-inside-a-before-pseudo-element-with-attr — Michael Coker, Apr 24 '17 at 22:18
The methods described do work, but not for AngularJS. The problem with them is that you need to hard-code the values into the data-content attribute in the HTML. I need something dynamic using Angular. After some investigation, I would need some kind of ng-xxx attribute to add to the page. There is a ng-attr-xxx that you can supposedly use, but I could not get that to work. There is also an ng-style, but you would need to build the style somewhere, which would then be mixing styles in the controller more than I would like. — ChristyPiffat, Apr 26 '17 at 15:30

Roko C. Buljan · Answer 1 · 2017-04-24T22:28:48.420

1

^{If I got your question correctly...}
try prefixing with &#x reference

span:before{
  content: attr(data-content);
}

<span data-content="&#x00ff;"></span>

references start with &# and end with ; and the x means that what's used is a hexadecimal value.

edited Apr 24 '17 at 22:28

answered Apr 24 '17 at 22:18

Roko C. Buljan

196,159
39
305
313

That works if I am able to hard-code the HTML. However, I am running this in an ng-repeat with the content depending on the dataItem.type for that record. For Angular, it appears that you can only use ng-xxx to get dynamic attributes. – ChristyPiffat Apr 26 '17 at 15:32

score 1 · Answer 2 · edited May 23 '17 at 12:34

1

This worked for me: https://stackoverflow.com/a/26025865/2077405

Insert in this format, using the \u that, in Javascript, denotes an Unicode number inside a string literal
$("a").attr ("data-content", "\u25BC");

edited May 23 '17 at 12:34

Community

1
1

answered May 09 '17 at 21:03

Ugo

587
8
12

Works for me in a project where I need to dynamically change a ::before content with the unicode of fontawesome – Tom Truyen Jul 04 '22 at 13:21

Changing CSS Unicode Content Property Dynamically

2 Answers2