Bootstrap 2를 사용하여 글리프 아이콘의 색상을 파란색으로 변경합니다.

UI에 Bootstrap 프레임 워크를 사용하고 있습니다. 글리프 아이콘의 색상을 파란색으로 변경하고 싶지만 모든 지역에서 사용하고 싶지는 않습니다. 어떤 곳에서는 기본 색상을 사용해야합니다.

이 두 링크를 언급했지만 도움이되는 것은 없습니다.

• CSS 만 사용하여 부트 스트랩 아이콘에 색상을 추가 할 수 있습니까?
• Bootstrap 3의 글리프 콘을 흰색으로 바꾸려면 어떻게해야합니까?

참고 : Bootstrap 2.3.2를 사용하고 있습니다.

아이콘은 color부모 의 CSS 속성 값에서 색상을 채택합니다 .

이를 스타일에 직접 추가 할 수 있습니다.

<span class="glyphicon glyphicon-user" style="color:blue"></span>

또는 아이콘에 클래스로 추가 한 다음 CSS에서 글꼴 색상을 설정할 수 있습니다

HTML

<span class="glyphicon glyphicon-search"></span>
<span class="glyphicon glyphicon-user blue"></span>
<span class="glyphicon glyphicon-trash"></span>

CSS

.blue {
    color: blue;
}

이 바이올린 에는 예가 있습니다.

text-successGlyphicon에 Twitter Bootstrap 클래스를 적용하기 만하면됩니다 .

<span class="glyphicon glyphicon-play text-success">начал работу</span>

사용 가능한 색상의 전체 목록 : 부트 스트랩 문서 : 도우미 클래스
(파란색도 있음)

마침내 나는 스스로 답을 찾았다. 2.3.2 부트 스트랩에 새 아이콘을 추가하려면 파일에 Font Awsome CSS 를 추가 해야합니다. 이 작업을 수행 한 후 스타일을 css로 재정 의하여 색상과 크기를 변경할 수 있습니다.

<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

CSS

.brown{color:#9b846b}

아이콘의 색상을 변경하려면 갈색 클래스를 추가하면 아이콘이 갈색으로 바뀝니다. 또한 다양한 크기의 아이콘을 제공합니다.

HTML

<p><i class="icon-camera-retro icon-large brown"></i> icon-camera-retro</p> <!--brown class added-->
<p><i class="icon-camera-retro icon-2x"></i> icon-camera-retro</p>
<p><i class="icon-camera-retro icon-3x"></i> icon-camera-retro</p>
<p><i class="icon-camera-retro icon-4x"></i> icon-camera-retro</p>

당신도 이것을 할 수 있습니다.

<span style="color:black"><i class="glyphicon glyphicon-music"></i></span>

부트 스트랩 3.0의 경우 다음과 같이 작동했습니다.

.myclass .glyphicon {color:blue !important;}

예, 아이콘을 흰색으로 설정할 수 있습니다. 여기 그것이 나를 위해 일한 방법입니다.

Bootstrap <3

HTML

<i class="icon-ok icon-white"></i>

아이콘이 흰색으로 표시됩니다.

부트 스트랩 2.3.2에 대한 대체 색상 라이브러리를 만들었습니다 . 이전 글리프 아이콘 라이브러리의 더 많은 색상에 관심이있는 사람이라면 누구나 사용할 수 있습니다.

부트 스트랩 아이콘 일 경우 아이콘은 텍스트 또는 타이포그래피 아래에 있습니다. 이와 같이 텍스트 색상 클래스를 추가하십시오. 예를 들어 아이콘 클래스에 대한 텍스트 기본, 텍스트 정보 등 :

<i class="icon features-icon icons8-collaboration-2 text-primary"></i>
<i class="icon features-icon icons8-collaboration-2 text-secondary"></i>

부트 스트랩> = v4.0에서 글리프 콘 지원이 중단되었습니다.

Glyphicons 아이콘 글꼴을 삭제했습니다. 아이콘이 필요한 경우 일부 옵션은 다음과 같습니다.

글 리피 콘 의 업스트림 버전

옥 티콘

멋진 글꼴

출처 : https://v4-alpha.getbootstrap.com/migration/#components

Bootstrap> = v4.0 이상을 사용하는 text-success경우 text-warning등 의 기존 스타일 클래스 부트 스트랩을 사용할 수 있습니다 .

예를 들어 fontawesome을 사용하는 경우 :

<i class="fa fa-tag text-danger" aria-hidden="true"></i>

CSS :

.blue-icon{
color:blue !important;
}

HTML

<i class="fa fa-wrench blue-icon"></i>

Glyphicons는 4.0에서 제거되었습니다. Font-awesome 4 이상을 권장합니다 :)

이전의 모든 대답은 정확하지만 색상을 변경하기 위해 한 곳에서 하나의 아이콘 만 필요한 경우 간단하고 빠른 방법입니다.

   <p style="color:green">Time icon: <span class="glyphicon glyphicon-time" ></span></p>  

부트 스트랩 글꼴 PNG 이미지에 i를 사용하는 경우 색상이 작동하지 않습니다.

[class^="icon-"],
[class*=" icon-"] {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-top: 1px;
  *margin-right: .3em;
  line-height: 14px;
  vertical-align: text-top;
  background-image: url("../img/glyphicons-halflings.png");
  background-position: 14px 14px;
  background-repeat: no-repeat;
}

HTML5는 CSS 필터를 사용하여 이미지를 채색합니다.

filter: invert(100%)  contrast(2) brightness(50%) sepia(40%) saturate(450%) hue-rotate(-50deg);