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

159

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

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

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

— cwd
소스

나는 그렇게 생각하지 않습니다 ...하지만 아마도 자바 스크립트와 캔버스 요소로 그렇게 할 수 있습니다.

— bfavaretto

@bfavaretto-정교하게 할 수 있습니까? 각 아이콘을 그리거나 기존 png 이미지를 사용하기 위해 코드 / 좌표를 생각해내는 것을 의미합니까?

— cwd

1

죄송하지만, 캔버스 요소를 사용하여 코드를 제안 할만큼 경험이 부족하지만 캔버스를 사용하여 픽셀을 개별적으로 조작 할 수 있다는 것을 알고 있습니다.

— bfavaretto

189

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

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

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

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

— hajpoj
소스

9

아, 영리하다! cursor: default;사용자가 I-Bar를 볼 수 없도록 설정하는 것을 잊지 마십시오 . 또한, 정말 영리한 글꼴 인 FF Chartwell을 확인하십시오 : tktype.com/chartwell.php

— Dai

4

텍스트 위에 마우스 커서를 놓으면 (예 : 워드 프로세서와 같이) 커서가 너무 큰 대문자 " I"문자 처럼 보입니다 . 텍스트를 선택하는 데 사용됩니다. CSS에서는이라고합니다 cursor: text;. "I- 빔"이라고도합니다.

— Dai

38

최신 버전의 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 글 리피 콘 목록

— fseminario
소스

17

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

예를 들어 CSS에  추가 text-info하면 아이콘이 파란색으로 표시됩니다.

— 자르기
소스

상황에 맞는 수업을 적용 할 수있는 방법을 찾고있었습니다. 모든 텍스트 * 문맥 수업이 작동합니다

— Dustin Hodges

14

다른 색상의 부트 스트랩 아이콘을 갖는 다른 가능한 방법은 원하는 색상으로 새 .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>

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

— Sepp Ludger
소스

5

다만 투자 의견에 원I was hoping for some other css3 brilliance that would prevent having to have an icon image set for each color

— CWD

크로스 브라우저와 호환되는 CSS를 통해서만 수행 할 수 없습니다. 일반적으로 사람들은 관련 아이콘이있는 색 구성표가 필요합니다. 따라서 최대 5 가지 색상 세트가 그렇게 큰 문제는 아니라고 말합니다.

— foxybagga

@seppludger 새로운 컬러 하프링 스프라이트를 어떻게 만드나요? 이 작업에 성공 했습니까? 그래픽 편집기에서 색상을로드하면 색상을 변경할 수 없습니다.

— 노먼

7

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

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

— frbl
소스

당신의 대답은 유용했습니다. 어떻게해야하는지 알려주시겠습니까?

아이콘을 다른 것으로 바꿀 수 있습니다. 예 : icon-white"> . 예를 들면 다음과 같습니다. . 새로운 부트 스트랩 imo를 사용하는 것이 좋습니다 ..

— frbl

6

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 재정의 에 대한 개별 강의를보십시오 .

— 유진
소스

4

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

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

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

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

— 몬스터 X
소스

4

스타일 태그와 함께 작동합니다.

<span class="glyphicon glyphicon-ok" style="color:#00FF00;"></span>

<span class="glyphicon glyphicon-remove" style="color:#FF0000;"></span>

여기에 이미지 설명을 입력하십시오

— joan16v
소스

3

실제로는 매우 쉽습니다.

그냥 사용하십시오 :

.icon-name{
color: #0C0;}

예를 들면 다음과 같습니다.

.icon-compass{
color: #C30;}

그게 다야.

— 아 네르 우드 딕 시트
소스

3

이 mask-image속성을 사용하십시오. 하지만 약간의 해킹입니다. 여기 Safari 블로그에서 시연 됩니다 .

또한 여기에 자세히 설명되어 있습니다 .

기본적으로 CSS 상자를 만들고 a background-image: gradient(foo);PNG 이미지를 기반으로 이미지 마스크를 적용합니다.

Photoshop에서 개별 이미지를 만드는 개발 시간을 절약 할 수 있지만 이미지를 다양한 색상으로 표시하지 않으면 대역폭을 절약 할 수 있다고 생각하지 않습니다. 이 기술을 효과적으로 사용하기 위해 마크 업을 조정해야하기 때문에 개인적으로 사용하지는 않겠지 만, "순도는 필수적"학교입니다.

— 다이
소스

1

이 mask-image부동산에 대한 지원 은 그다지 좋지 않습니다 .

— Scott Bartell

1

받아 들인 대답 (글꼴 멋진 사용)이 맞습니다. 그러나 빨간색 오류가 유효성 검사 오류에 표시되기를 원했기 때문에이 사이트 에서 친절하게 제공되는 애드온 패키지를 사용했습니다 .

CSS 파일에서 URL 경로는 절대적이므로 (/로 시작) 상대 경로를 선호하기 때문에 URL 경로를 편집했습니다. 이처럼 :

.icon-red {background-image: url("../img/glyphicons-halflings-red.png") !important;}
.icon-purple {background-image: url("../img/glyphicons-halflings-purple.png") !important;}
.icon-blue {background-image: url("../img/glyphicons-halflings-blue.png") !important;}
.icon-lightblue {background-image: url("../img/glyphicons-halflings-lightblue.png") !important;}
.icon-green {background-image: url("../img/glyphicons-halflings-green.png") !important;}
.icon-yellow {background-image: url("../img/glyphicons-halflings-yellow.png") !important;}
.icon-orange {background-image: url("../img/glyphicons-halflings-orange.png") !important;}

— mppfiles
소스

마지막으로, 이전 버전의 부트 스트랩과 호환되는 것

— Dmitry Ginzburg

1

전체적으로 색상을 변경할 수 있습니다

즉

 .glyphicon {
       color: #008cba; 
   }

— 개발자
소스

1

GLYPHICONS를 사용 하면 CSS를 설정하기 만하면 색상을 변경할 수 있습니다.

#myglyphcustom {
    color:#F00;
}

— 발터 로런
소스

0

이 스 니펫을이 이전 게시물에 추가 할 수 있다고 생각했습니다. 이것은 아이콘이 글꼴이되기 전에 과거에 한 일입니다.

<i class="social-icon linkedin small" style="border-radius:7.5px;height:15px;width:15px;background-color:white;></i>
<i class="social-icon facebook small" style="border-radius:7.5px;height:15px;width:15px;background-color:white;></i>

이것은 @frbl의 부적절한 답변과 매우 유사하지만 다른 이미지는 사용하지 않습니다. 대신 요소의 배경색을 설정하고 whiteCSS 속성 border-radius을 사용하여 전체 요소를 "둥근" 으로 만듭니다 . border-radius알다시피 , (7.5px) 의 값은 widthand height속성 값의 정확히 절반입니다 (15px, 아이콘이 사각형으로 표시됨) .

— Web 원더러
소스