Using attr(data-icon) property to display unicode before element

by

CSS escape sequences only work within CSS strings. When you take a CSS escape sequence from an HTML attribute (i.e. outside of CSS), it will be read literally, not interpreted as part of a CSS string.

If you want to encode the character within an HTML attribute, you need to encode it as an HTML entity. This will be seen by CSS as the corresponding Unicode character. Since this is a hexadecimal escape sequence you can transliterate it like so:

<div data-icon="&#x25B6;">Title</div>

Alternatively you can just use the Unicode character itself:

<div data-icon="▶">Title</div>

If the attribute’s value needs to be reactive in Vue or any of the now popular JavaScript frameworks, use the JavaScript escape sequence notation, within a JavaScript string (if you’re confused, just pay attention to the nested quotes in the following example):

<div :data-icon="'\u25b6'">Title</div>

More Related Contents:

  1. Can I use a :before or :after pseudo-element on an input field?
  2. CSS content property: is it possible to insert HTML instead of Text?
  3. CSS data attribute new line character & pseudo-element content value
  4. after pseudo element not appearing in code
  5. Font Awesome 5 on pseudo elements shows square instead of icon
  6. Html/Css Triangle with pseudo elements
  7. Adding HTML entities using CSS content
  8. :after and :before CSS pseudo elements hack for Internet Explorer 7
  9. Elongated hexagon shaped button using only one element
  10. Using CSS :before and :after pseudo-elements with inline CSS?
  11. What characters can be used for up/down triangle (arrow without stem) for display in HTML?
  12. Color for Unicode Emoji
  13. Why does a filter gradient on a pseudo element not work in IE8?
  14. How can I use the CSS pseudo-element :before{ content: ” } to affect an element?
  15. Can a ::before selector be used with a ?
  16. Which elements support the ::before and ::after pseudo-elements?
  17. Font Awesome & Unicode
  18. pseudo-element acting like a grid item in CSS grid
  19. Adding text before list
  20. CSS Button styling – Need some help -html css RADIO BUTTON LINK
  21. Make body have 100% of the browser height
  22. Adding external CSS in an HTML file
  23. Prevent flex items from stretching
  24. Hexagon shape with a border/outline
  25. How to add the text “ON” and “OFF” to toggle button
  26. How to make resizeable?
  27. CSS – Border where only half of a border is visible
  28. content url is not working in Firefox [closed]
  29. Hover effects not working with IE8
  30. Why does flex-box work with a div, but not a table?

Leave a Comment