[css] CSS 만 사용하여 부트 스트랩 아이콘에 색상을 추가 할 수 있습니까?

트위터의 부트 스트랩은 Glyphicons의 아이콘을 사용합니다 . available in dark gray and white기본적으로 ” “입니다.

CSS의 속임수를 사용하여 아이콘의 색상을 변경할 수 있습니까? 각 색상에 대해 아이콘 이미지를 설정하지 않아도되는 다른 CSS3 광채를 원했습니다.

둘러싸는 ( <i>) 요소 의 배경색을 변경할 수 있지만 아이콘 전경색에 대해 이야기하고 있습니다. 아이콘 이미지의 투명도를 반전시킨 다음 배경색을 설정할 수 있다고 생각합니다.

CSS 만 사용하여 부트 스트랩 아이콘에 색상을 추가 할 수 있습니까?

답변

예, 부트 스트랩과 함께 Font Awesome 을 사용한다면 ! 아이콘은 약간 씩 다르지만 더 많고 크기에 상관없이 색상을 변경할 수 있습니다.

기본적으로 아이콘은 글꼴이며 CSS 색상 속성을 사용하여 색상을 변경할 수 있습니다. 통합 지침은 제공된 링크의 페이지 하단에 있습니다.

편집 : 부트 스트랩 3.0.0 아이콘은 이제 글꼴입니다!

다른 사람들이 Bootstrap 3.0.0 릴리스에서 언급했듯이 기본 아이콘 글리프 는 이제 Font Awesome과 같은 글꼴이며 colorCSS 속성 을 변경하여 색상을 간단하게 변경할 수 있습니다 . 크기 변경은 font-size속성을 통해 수행 할 수 있습니다 .

답변

최신 버전의 Bootstrap RC 3에서는 원하는 색상의 클래스를 추가하고 범위에 추가하는 것만으로 아이콘 색상을 변경하는 것이 간단합니다.

기본 검은 색 :

<h1>Password Changed <span class="glyphicon glyphicon-ok"></span></h1>

될 것이다

<h1>Password Changed <span class="glyphicon glyphicon-ok icon-success"></span></h1>

CSS

.icon-success {
    color: #5CB85C;
}

부트 스트랩 3 글 리피 콘 목록

답변

글리프 콘이 이제 글꼴이므로 컨텍스트 클래스 를 사용 하여 아이콘에 적절한 색상을 적용 할 수 있습니다 .

예를 들어
CSS에 <span class="glyphicon glyphicon-info-sign text-info"></span>
추가 text-info하면 아이콘이 파란색으로 표시됩니다.

답변

다른 색상의 부트 스트랩 아이콘을 갖는 다른 가능한 방법은 원하는 색상으로 새 .png를 생성하고 (예 : 마젠타) / path-to-bootstrap-css / img / glyphicons-halflings- magenta .png로 저장하는 것입니다.

당신에 variables.less의 발견

// Sprite icons path
// -------------------------
@iconSpritePath:          "../img/glyphicons-halflings.png";
@iconWhiteSpritePath:     "../img/glyphicons-halflings-white.png";

이 줄을 추가

@iconMagentaSpritePath:     "../img/glyphicons-halflings-magenta.png";

당신에 sprites.less에 추가

/* Magenta icons with optional class, or on hover/active states of certain elements */
.icon-magenta,
.nav-pills > .active > a > [class^="icon-"],
.nav-pills > .active > a > [class*=" icon-"],
.nav-list > .active > a > [class^="icon-"],
.nav-list > .active > a > [class*=" icon-"],
.navbar-inverse .nav > .active > a > [class^="icon-"],
.navbar-inverse .nav > .active > a > [class*=" icon-"],
.dropdown-menu > li > a:hover > [class^="icon-"],
.dropdown-menu > li > a:hover > [class*=" icon-"],
.dropdown-menu > .active > a > [class^="icon-"],
.dropdown-menu > .active > a > [class*=" icon-"],
.dropdown-submenu:hover > a > [class^="icon-"],
.dropdown-submenu:hover > a > [class*=" icon-"] {
  background-image: url("@{iconMagentaSpritePath}");
}

그리고 이것을 다음과 같이 사용하십시오 :

<i class='icon-chevron-down icon-magenta'></i>

그것이 누군가를 돕기를 바랍니다.

답변

아이콘을 실제로 채색하는 것이 아니라 원하는 색상의 레이블이나 배지로 둘러 쌉니다.

<span class="label-important label"><i class="icon-remove icon-white"></i></span>
<span class="label-success label"><i class="icon-ok icon-white"></i></span>

답변

Bootstrap Glyphicon은 글꼴입니다. 이것은 CSS 스타일을 통해 다른 텍스트처럼 변경할 수 있음을 의미합니다.

CSS :

<style>
   .glyphicon-plus {
       color: #F00;
   }
</style>

HTML :

<span class="glyphicon glyphicon-plus"></span>

예:

<!doctype html>
<html>
<head>
<title>Glyphicon Colors</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
   .glyphicon-plus {
        color: #F00;
   }
</style>
</head>

<body>
    <span class="glyphicon glyphicon-plus"></span>
</body>
</html>

Jen Kramer의 Bootstrap 3 Up and Running
코스를 보거나 사용자 정의 스타일로 핵심 CSS 재정의 에 대한 개별 강의를보십시오 .

답변

이것은 모두 약간 원형 교차로입니다 ..

나는 이런 글리프를 사용했다

  </div>
        <div class="span2">
            <span class="glyphicons thumbs_up"><i class="green"></i></span>
        </div>
        <div class="span2">
            <span class="glyphicons thumbs_down"><i class="red"></i></span>
        </div>

색상에 영향을주기 위해 머리에 약간의 CSS를 포함 시켰습니다.

<style>
        i.green:before {
            color: green;
        }
        i.red:before {
            color: red;
        }
    </style>

짜잔, 녹색과 빨간색 엄지 손가락.