htmlcssicomoon

How to set icon content of pseudo element by its attribute?


I'm using icomoon as my icon library

And I'm trying to dynamically set icons by the attribute data-icon.

But it seems the content can't be recognized as a charset using attr(data-icon).

Is there a way to make \e92c as a character rather than string literal using attr()?

#expected::before {
  content: '\e92c';
  font-family: 'icomoon';
}

[data-icon]::before {
  content: attr(data-icon);
  font-family: 'icomoon';
}
<h2>This is what I expected</h2>
<a class="button" id="expected" href="javascript: void(0)">Save</a>

<h2>This is what I get :(</h2>
<a class="button" data-icon="\e92c" href="javascript: void(0)">Save</a>


Solution

  • HTML text is escaped differently from CSS text. In the attribute, you want &#xE92C; for the equivalent hex excape (what the spec calls a "decimal character reference" or a "hexadecimal character reference;" details here).

    Hexadecimal character reference (note the x after the #):

    data-icon="&#xE92C;"
    

    Decimal (no x):

    data-icon="&#59692;"
    

    Live example:

    #expected::before {
      content: '\00e92c';
      font-family: 'icomoon';
    }
    
    [data-icon]::before {
      content: attr(data-icon);
      font-family: 'icomoon';
    }
    <h2>This is what I expected</h2>
    <a class="button" id="expected" href="javascript: void(0)">Save</a>
    
    <h2>From <code>data-icon</code></h2>
    <a class="button" data-icon="&#xE92C;" href="javascript: void(0)">Save</a>