글리프콘 패키지에 포함되지 않은 부트 스트랩 3 글리프 숑의 색상을 흰색으로 변경하려면 어떻게해야합니까?

Question

우리 프로젝트에는 부트 스트랩 3 글리프콘이 포함되어 있습니다. 그러나 글리프콘 다운로드 패키지에는 잠금 해제 글리프 아이콘이 없습니다. 이 파일을 별도로 다운로드하여 포함시켜야합니다. 이 때문에, 나는 다른 glyphicons처럼 행동하는 데 어려움을 겪고 있습니다.

아래에 글리프콘 패키지가 저장된 라이브러리 파일과 잠금 해제 글리프 아이콘이있는/public/img 폴더가 있습니다. 내가 흰색이 아이콘을 설정하는 생각할 수있는 모든 노력을했습니다

. 내 CSS에서

<ul class="nav pull-right"> 
 
     <li> 
 
     <a id="unlock-all" href="#" title="Unlock All" > 
 
     <span class="glyphicon glyphicons-unlock icon-white" style="color:white;" > 
 
      <img src="/public/img/glyphicons-unlock.png" > 
 
     </span> 
 
     </a> 
 
     </li> 
 
</ul>

:

이

#unlock-all { 
 
    color: #ffffff; 
 

 
} 
 

 
.glyphicon.glyphicons-unlock.white { 
 
    color: #ffffff; 
 
} 
 

 

 
#unlock-all .glyphicon { 
 
    color: #ffffff; 
 

 
}

사람이 내가 잘못 알고 있나요? 그리고 네,이 비슷한 질문을하는 또 다른 stackoverflow 알아요,하지만 구체적으로 해결되지 않으며 그 솔루션은 나를 위해 작동하지 않습니다.

편집 : ANSWERED는 :

이 솔루션을 사용 :

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
    <li> 
 
     <a id="unlock-all" href="#" title="Unlock All" > 
 
     <i class="fa fa-unlock" aria-hidden="true" style="color: #ffffff; background-color:black;"></i> 
 
     </a> 
 
     </li>

와 내가 실제로 CSS의 색상을 변경하지만 "이것으로 그렇게하는 방법을 알아낼 수 없었다 코드 삽입 "옵션을 선택하십시오. 예 :이 filter 재산과 속임수의 비트를 사용하여 수행 할 수 있습니다

#unlock-all { 
    color: #ffffff; 
} 

Answer 1

의견 작성자의 말처럼 css를 사용하면 이미지의 색상을 변경할 수 없습니다.

나는 당신이 여기에서 찾을 수있는 fontawsome 제 (가장 최고)로 glyphicons 전환하는 경향 거라고 : http://fontawesome.io는

이 훨씬에서 glyphicon 세트와 동일한 방식으로 작동하고 무료로 더 많은 아이콘이 있습니다.colourwith을 설정할 수있는 에일로 보너스로

<i class="fa fa-unlock"></i> 

뿐만 아니라 :

이것은 당신이 fontawsone의도 CDN을 볼 수 있습니다 파일뿐만 아니라 직접 다운로드를 포함 일단 당신이 원하는 일을해야한다 이

Answer 2

:

img { 
 
    filter: brightness(0) invert(1); 
 
    -webkit-filter: brightness(0) invert(1); 
 
} 
 

 
body { 
 
    background-color: #000; 
 
}

<!-- This image is naturally black --> 
 
<img src="http://i.imgur.com/k66su2k.png">

우리는 검은 만들기 0 이미지의 밝기를 설정할

, 다음을 반전 그것은 흰색으로 만듭니다.