CODEWITHSUNDEEP
javascripthtmlcssunicode
venkatraj
venkatraj

Reputation: 101

Adding icons to pseudo elements

I'm trying to add icons to my navigation (which dynamically changes) via JavaScript.

Here is my code (or JSFiddle):

var icon = document.querySelector('#icon');
icon.setAttribute('data-icon', '†');
#icon:after {
  content: attr(data-icon);
}
<div id="icon" data-icon="">
  Icon
</div>

But it is not working, why? When tried to edit data-icon attribute manually, icon appears. Otherwise just unicode of icon.

Upvotes: 9

Views: 8970

Answers (3)

&#193;lvaro Gonz&#225;lez
&#193;lvaro Gonz&#225;lez

Reputation: 146470

HTML entities don't have any meaning in CSS. If you want to follow that path you need to decode it first:

var icon = document.querySelector('#icon');
var tmp = document.createElement("span");
tmp.innerHTML = '&#x86;';
icon.setAttribute('data-icon', tmp.innerText);
#icon:after {
  content: attr(data-icon);
}
<div id="icon" data-icon="">
  Icon
</div>

... or, alternatively, just type character as-is (as long as your application is written in UTF-8):

var icon = document.querySelector('#icon');
icon.setAttribute('data-icon', '†');
#icon:after {
  content: attr(data-icon);
}
<div id="icon" data-icon="">
  Icon
</div>

Last but not least, CSS also accepts escape sequences but you need to use the appropriate syntax. This approach, however, does not seem to work for your specific character:

var icon = document.querySelector('#icon');
// Brackets added for visibility, not part of the syntax
icon.setAttribute('data-icon', '(\u0086)(\u2020)');
#icon:after {
  content: attr(data-icon);
}
<div id="icon" data-icon="">
  Icon
</div>

I presume it's related to the fact that U+2020 'DAGGER' (that works fine) is a regular character but the one you're using U+0086 'START OF SELECTED AREA' (which doesn't show) is a control character. As you mention in a follow-up comment, you're using FontAwesome and such libraries provide custom fonts that map certain code points to display icons (though they normally use private areas to avoid conflicts).

Upvotes: 6

Fred Gandt
Fred Gandt

Reputation: 4312

Encoding minefield

See this StackOverflow answer for more details.

Answer updated (see comments and edits).

In short, I recommend using the character instead of any method of encoding it. It will be vital in this case that your HTML files are correctly encoded and that they properly inform browsers what the encoding is.

var js = document.querySelectorAll( ".js" );
js[ 0 ].setAttribute( "data-icon", "\u0086" );
js[ 1 ].setAttribute( "data-icon", "†" );
.css:after {
    content: "\86";
    color: red;
}
.css.char:after {
    content: "†";
    color: blue;
}
.data:after {
    content: attr( data-icon );
}
.js:after {
    content: attr( data-icon );
}
.red:after {
    color: red;
}
.blue:after {
    color: blue;
}
<div class="css">hard coded css content</div>
<div class="css char">hard coded css content char</div>
<br>
<div class="data red" data-icon="&#x086;">hard coded data-icon</div>
<div class="data blue" data-icon="†">hard coded data-icon char</div>
<br>
<div class="js red">data-icon by js</div>
<div class="js blue">data-icon by js char</div>

Upvotes: 1

vsync
vsync

Reputation: 130391

That is obviously because setAttribute is escaping your special characters...and anyway you need to use CSS encoded icons and not an HTML entity. use this convertor:

&#x086; → \0086

I would suggest working with meaningful names instead of hard-coded writing the icon's code into an attribute.

For example:

var icon = document.querySelector('#icon');
icon.setAttribute('data-icon', 'icon-heart');

[data-icon=icon-heart]{
    content:'\2764';
}

(better that all your icons elements will have a shared class which shared properties)

Upvotes: 2

Related Questions