I'm using an html entity as a data attribute that, through CSS, will render an icon:

<span data-icon="&#xe6a8;">
Delete Token


[data-icon]:before { content: attr(data-icon); margin-right: 0.75em; }

Something seems to be preventing the entity from actually rendering though and instead shows the raw entity value:

Delete Icon Not Rendering

We use this approach in other applications without issue, so I'm thinking it must be related to Salesforce. Is that right?

  • Are you using a literal for that entity or merging it in? Can you share the CSS as well? – Adrian Larson Aug 24 '15 at 20:21
  • @AdrianLarson - I've added it to the OP – Dan Bough Aug 25 '15 at 13:05

It looks like Salesforce is escaping the character code and hence it is being displayed as plain text.
The data-icon attribute would work if the character code is not escaped. However, I am not sure how to achieve that.

I tried the following code by first getting the correct unescaped character into a span and on page load added it to the data-icon attribute and it worked.

<apex:page id="myPage" >
        [data-icon]:before {
            font-family: icons;
            content: attr(data-icon);
            speak: none;


        function setIcon(){
            var mychar = document.getElementById("myPage:myChar").innerHTML;
            var elem = document.getElementById("testSpan");
            elem.setAttribute("data-icon", mychar);

        window.onload = function(){


  <apex:outputText style="display:none;" id="myChar" value="&#x21dd;" escape="false" ></apex:outputText>

  <span id="testSpan" style="font-size: 50px">
       Delete Token


enter image description here

  • Thanks! This seems like a lot of work to do something so small - but I'll keep it in mind as an option. – Dan Bough Aug 25 '15 at 13:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.