[html] Bootstrap 2를 사용하여 글리프 아이콘의 색상을 파란색으로 변경합니다.
UI에 Bootstrap 프레임 워크를 사용하고 있습니다. 글리프 아이콘의 색상을 파란색으로 변경하고 싶지만 모든 지역에서 사용하고 싶지는 않습니다. 어떤 곳에서는 기본 색상을 사용해야합니다.
이 두 링크를 언급했지만 도움이되는 것은 없습니다.
참고 : 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>아이콘이 흰색으로 표시됩니다.
