CODEWITHSUNDEEP
csscss-content
ChristyPiffat
ChristyPiffat

Reputation: 379

Changing CSS Unicode Content Property Dynamically

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?

Upvotes: 1

Views: 1541

Answers (2)

Ugo
Ugo

Reputation: 652

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

Upvotes: 1

Roko C. Buljan
Roko C. Buljan

Reputation: 206024

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.

Upvotes: 1

Related Questions