Minimalist Semantic Markup

Welcome Guest
Please Login or Register

If you have registered but not recieved your activation e-mail in a reasonable amount of time, or have issues with using the registration form, please use our Contact Form for assistance. Include both your username and the e-mail you tried to register with.

Author Topic: Render icon  (Read 178 times)


  • Jr. Member
  • **
  • Posts: 80
  • Karma: +0/-0
Render icon
« on: 9 Dec 2022, 03:37:54 pm »
This is my css (which works fine):
[class]:after {
--icon: "\f2ed";
content: var(--icon);

This is the javascript I need to change the icon variable:
this.icon = "\f2ee";

but if "\f2ed" is passed, the "\f" is removed and an error thrown. I'm sure I'm missing something simple to prevent the \f being stripped so if someone has a quick fix, I'd appreciate it.

Jason Knight

  • Administrator
  • Hero Member
  • *****
  • Posts: 1029
  • Karma: +188/-1
    • CutCodeDown -- Minimalist Semantic Markup
Re: Render icon
« Reply #1 on: 9 Dec 2022, 03:53:47 pm »
You've got some problems.

1) Object.icon is not the CSS variable (unless you've done something funky

2) Not sure you need to be setting a class there.

3) \f is a JavaScript escape sequence for a "form feed". To store the slash in the string so that CSS will get it, you need to double-slash to get an escaped slash.

See how \\ escapes a single slash, and \f is a form feed?

What you should be doing is along the lines of:

Code: [Select]"--icon", "\\F2ED");

You also have the problem of setting the var --icon on the :after instead of the parent, making it harder to override. But then that [class] thing throws up all sorts of warning flags for me.
We are all, we are all, we are all FRIENDS! For today we're all brothers, tonight we're all friends. Our moment of peace in a war that never ends.


SMF spam blocked by CleanTalk