Próbuję dodać ikony do mojej nawigacji (które dynamicznie się zmienia) za pośrednictwem JavaScript.

Oto mój kod (lub jsfiddle):

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

Ale to nie działa, dlaczego? Po próbom edycji data-icon Atrybut ręcznie pojawia się ikona. W przeciwnym razie tylko Unicode of Icon.

8
venkatraj 26 czerwiec 2017, 10:24

3 odpowiedzi

Najlepsza odpowiedź

Podmioty HTML nie mają znaczenia w CSS. Jeśli chcesz śledzić tę ścieżkę, musisz najpierw zdekodować:

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>

... lub alternatywnie, po prostu wpisz znak AS-is (tak długo, jak twoja aplikacja jest napisana w UTF-8):

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

Wreszcie, CSS akceptuje również sekwencje ucieczki, ale musisz użyć odpowiednią składnię . To podejście nie wydaje się jednak pracować dla konkretnej postaci:

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>

Przypuszczam, że jest to związane z faktem, że U + 2020 'Sztylet' (to działa dobrze) jest Regularna postać Ten, którego używasz U + 0086 'początek wybranego obszaru " (który nie pokazuje) to znak kontrolny. Jak wspomniasz w komentarzu obserwacyjnym, używasz fontawesome i takich bibliotek, podaj niestandardowe czcionki, które mapują określone punkty kodu, aby wyświetlić ikony (choć zwykle używają Tereny prywatne, aby uniknąć konfliktów).

5
Álvaro González 22 grudzień 2018, 10:43

Kodowanie minefield.

Zobacz Ta stackoverflow Odpowiedź Więcej informacji.

Odpowiedź zaktualizowana (patrz komentarze i Edytki).

Krótko mówiąc, polecam użycie znaku zamiast dowolnej metody kodowania go. W tym przypadku będzie ważne, że pliki HTML są prawidłowo zakodowane i prawidłowo informują przeglądarki, co jest kodowanie.

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>
1
Fred Gandt 26 czerwiec 2017, 14:13

To oczywiście dlatego, że setAttribute ucieka z twoimi znakami specjalnymi ... i tak chcesz użyć kodowanych ikon CSS, a nie podmiotem HTML. Użyj Ten konwerter:

&#x086; → {x1}}

Sugerowałbym pracę z nazwiskami znaczącymi , zamiast trudno zakodować kod ikonę w atrybut.

Na przykład:

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

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

(Lepsze, że wszystkie elementy ikony będą miały współdzieloną klasę, która właściwości współdzielone)

2
Community 20 czerwiec 2020, 09:12