부트스트랩 2를 사용하는 일부 위치에서는 글리피콘의 색상을 파란색으로 변경합니다.

부트스트랩 2를 사용하는 일부 위치에서는 글리피콘의 색상을 파란색으로 변경합니다.

UI에 부트스트랩 프레임워크를 사용하고 있습니다.글리피콘 색상을 파란색으로 변경하고 싶은데 모든 곳에서 변경할 수는 없습니다.일부 위치에서는 기본 색상을 사용해야 합니다.

저는 이 두 링크를 참조했지만 도움이 되는 것을 찾지 못했습니다.

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

참고:저는 부트스트랩 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;
}

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

Twitter 부트스트랩 적용하기text-success글리피콘 수업:

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

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

마침내 나는 스스로 답을 찾았습니다.2.3.2 부트스트랩에 새로운 아이콘을 추가하기 위해 우리는 당신의 파일에 Font A 일부 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용 대체 색상 라이브러리를 만들었습니다. 오래된 글리피콘 라이브러리의 더 많은 색상에 관심이 있는 사람이라면 누구나 사용할 수 있고 쉽게 사용할 수 있습니다.

부트스트랩 아이콘일 경우.아이콘은 텍스트 또는 타이포그래피 아래에 있습니다.이렇게 텍스트 색상 클래스를 추가하면 됩니다.예: text-primary, text-info 등의 아이콘 클래스:

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

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

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

상류 버전의 글리피콘

옥티콘

폰트 어썸

출처: https://v4-alpha.getbootstrap.com/migration/ #구성요소

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

예를 들어 폰타썸을 사용하는 경우:

<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>

글리피콘은 4.0에서 제거되었습니다, 저는 폰트 어썸 4 이상을 추천합니다 :)

이전의 답변은 모두 정답이지만 한 곳에 아이콘 하나만 있으면 색상을 변경할 수 있는 간단하고 빠른 방법은 다음과 같습니다.

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

i와 같이 부트스트랩 폰트 png 이미지에 사용할 경우 색상이 작동하지 않습니다.

[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);

언급URL : https://stackoverflow.com/questions/18334851/change-the-color-of-glyphicons-to-blue-in-some-but-not-at-all-places-using-boot