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;
}
글리프 콘이 이제 글꼴이므로 컨텍스트 클래스 를 사용 하여 아이콘에 적절한 색상을 적용 할 수 있습니다 .
예를 들어 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}");
}
And use it like this:
<i class='icon-chevron-down icon-magenta'></i>
Hope it helps someone.
Quick and dirty work around which did it for me, not actually coloring the icon, but surrounding it with a label or badge in the color you want;
<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>
The Bootstrap Glyphicons are fonts. This means it can be changed like any other text through CSS styling.
CSS:
<style>
.glyphicon-plus {
color: #F00;
}
</style>
HTML:
<span class="glyphicon glyphicon-plus"></span>
Example:
<!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>
Watch the course Up and Running with Bootstrap 3 by Jen Kramer, or watch the individual lesson on Overriding core CSS with custom styles.
This is all a bit roundabout..
I've used the glyphs like this
</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>
and to affect the color, i included a bit of css at the head like this
<style>
i.green:before {
color: green;
}
i.red:before {
color: red;
}
</style>
Voila, green and red thumbs.
Also works with the style tag:
<span class="glyphicon glyphicon-ok" style="color:#00FF00;"></span>
<span class="glyphicon glyphicon-remove" style="color:#FF0000;"></span>
It is actually very easy:
just use:
.icon-name{
color: #0C0;}
For example:
.icon-compass{
color: #C30;}
That's it.
Use the mask-image property, but it's a bit of a hack. It's demonstrated in the Safari blog here.
It's also described in-depth here.
Basically you'd create a CSS box, with say a background-image: gradient(foo); and then apply an image mask to it based on those PNG images.
It would save you development time making individual images in Photoshop, but I don't think it would save much bandwidth unless you'll be displaying the images in a wide variety of colours. Personally I wouldn't use it because you need to adjust your markup to use the technique effectively, but I'm a member of the "purity is imperitive" school-of-thought.
The accepted answer (using font awesome) is the right one. But since I just wanted the red variant to show on validation errors, I ended using an addon package, kindly offered on this site.
Just edited the url paths in css files since they are absolute (start with /) and I prefer to be relative. Like this:
.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;}
You can change color globally as well
i.e.
.glyphicon {
color: #008cba;
}
I thought that I might add this snippet to this old post. This is what I had done in the past, before the icons were fonts:
<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의 부적절한 답변과 매우 유사하지만 다른 이미지는 사용하지 않습니다. 대신 <i>요소의 배경색을 설정하고 whiteCSS 속성 border-radius을 사용하여 전체 <i>요소를 "둥근" 으로 만듭니다 . border-radius알다시피 , (7.5px) 의 값은 widthand height속성 값의 정확히 절반입니다 (15px, 아이콘이 사각형으로 표시됨) <i>.
GLYPHICONS를 사용 하면 CSS를 설정하기 만하면 색상을 변경할 수 있습니다.
#myglyphcustom {
color:#F00;
}
참고 URL : https://stackoverflow.com/questions/12379153/can-i-add-color-to-bootstrap-icons-only-using-css
'Programing' 카테고리의 다른 글
| “node_modules”폴더가 git 저장소에 포함되어야합니다 (0) | 2020.06.04 |
|---|---|
| JavaScript에서 Java의 Thread.sleep ()에 해당하는 것은 무엇입니까? (0) | 2020.06.04 |
| rhc 설정은 오류 파일 'dl / import 가져 오기 없음' (0) | 2020.06.04 |
| 쉘 명령을 실행하는 Groovy (0) | 2020.06.04 |
| HTTP fetch () 요청을 어떻게 취소합니까? (0) | 2020.06.04 |