Цвет шрифта удивительного селектора

Question

мне было интересно, если бы можно было изменить селектор цвета шрифта удивительного значок

Я знаю, что его можно изменить все, кроме шрифта удивительного, используя этот код

::selection{ 
    background: #ffb7b7 !important; /* Safari */ 
} 
::-moz-selection { 
    background: #ffb7b7; /* Firefox */ 
} 

Я также протестировал следующее:

.icon-2x::selection { 
    background: #ffb7b7 !important; 
    } 
i::selection { 
    background: #ffb7b7 !important; 
    } 

Answer 1

Проблема, кажется, что шрифт-устрашающий CSS впрыскивает иконку с помощью ::before псевдо-элемент, и браузеры, кажется, не в состоянии правильно выбрать это. Обратите внимание, что если перед значком есть разрыв строки, и вы также выбираете предыдущую строку, она работает (вроде).

Обходным путем является добавление персонажа непосредственно на разметку (в данном случае это ). Demo.

Если этот курс будет работать только с элементами с font-family: FontAwesome (шрифт awesome CSS добавляет его ко всем элементам с классом icon-[something]).

Answer 2

Это шрифт, так что вы просто использовать color

i::selection { 
    background: #ffb7b7; 
    color:red; 
} 

EDIT

Here is the closes you can get without adding any HTML. Вы не можете выбрать шрифт удивительные иконы, только материал внутри

EDIT 2

Если вы готовы использовать капельку Javascript вы можете сделать это с помощью окружающих DIV like this version. Вы можете сделать это именно так, как вы хотите, настроив кол. Дайте мне знать, если у вас есть еще вопросы.

Код

<div class='selectable'><i id='newSelect0' class="icon-cog"></i>.</div> 

// CSS 
i { 
    background: transparent; 
    color:black; 
} 
.selectable { 
    color:transparent; 
} 
.selectable::selection { 
    color:transparent; 
} 

// Javascript 
setInterval(function() { 
    if (window.getSelection) { 
     var text = window.getSelection().toString(); 
    } 
    var selectable = document.getElementsByClassName('selectable'); 
    for(var t = 0; t < selectable.length; t++) 
    { 
     var elem = document.getElementById('newSelect' + t); 
     if (text != '' && window.getSelection().anchorNode.parentNode == selectable[t]) { 
      elem.style.background = '#ffb7b7'; 
      elem.style.color = 'green'; 
     } else { 
      elem.style.background = 'white'; 
      elem.style.color = 'black'; 
     } 
    } 
}, 20);