0

I have a small problem. I want to change glyphicons (icon-font) using jQuery, like this:

var icoList = 'E251'

var icon = $('ul > li:has(ul)', $this);
icon.addClass('icon');

icon.attr('data-before', '&#x' + icoList);          // this doesn' work, -> &#xE251
icon.attr('data-before', '\' + icoList);            // this doesn' work, -> TypeError
icon.attr('data-before', '\\' + icoList);           // this doesn' work, -> \E251
icon.attr('data-before', '"\\' + icoList + '"');    // this doesn' work, -> "\E251"

I only get a string.

My css is like this:

ul li::before {
    font-family: "Glyphicons Halflings";
    content: attr(data-before);
}

In my HTML I tried this:

<nav id="Nav-Main" class="nav-main">
    <ul>
        <li data-before="&#xE251">              <!--  this works fine  -->
            <a href="#">Home</a>

            <ul class="flexy">
                <li>
                    <a href="#">Referenzen</a>
                </li>
                <li>
                    <a href="#">Downloads</a>
                </li>
            </ul>
        </li>
    </ul>
</nav>

If I use the Data in my html code, then it works fine.

What did I do wrong? How I can get this icon using code?

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
Tabes
  • 33
  • 6
  • Note that you're missing a `;` on the character reference (in the HTML, too). It should be ``, not just ``. The browser may tolerate it in some situations, but it's incorrect without the `;`. – T.J. Crowder May 20 '18 at 14:57
  • `icon.attr('data-before', '\uE251')` – Niet the Dark Absol May 20 '18 at 14:58
  • Your first attempt is correct (if we add the `;`): `icon.attr('data-before', '' + icoList + ";");` It's entirely likely that you need to do something to make the Glyphicons stuff re-read the attribute, though; just setting the attribute isn't likely to make anything change. – T.J. Crowder May 20 '18 at 14:58
  • `icon.attr('data-before', '\uE251')`... this works right, but i cant use. I need this data from a variable. – Tabes May 20 '18 at 17:48
  • `icon.attr('data-before', '' + icoList + ";");` this also doesn't work. Then i get `` – Tabes May 20 '18 at 17:50

0 Answers0