아이콘 글꼴 및 CSS 변경 색상이있는 버그

글꼴 (boot)과 glyphicons (PRO 버전이지만 거의 동일하고 더 많은 아이콘)을 글꼴로 사용하고 있습니다. 맥락에서 하나아이콘 글꼴 및 CSS 변경 색상이있는 버그

샘플 코드 : 그것은 잘 작동

<div class="col-md-4"> 
    <span class="glyph_icons compass"></span><br /> 
    <h4>Jurassic Park Lorem Ipsum</h4> 
    <p>I was overwhelmed by the power of this place; but I made a mistake, too. I didn't have enough respect for that power and it's out now. The only thing that matters now are the people we love: Alan and Lex and Tim. John, they're out there where people are dying.</p> 
</div>

. 이제 호버 (hover) 색상 변경을 추가하고 싶습니다. 일부 글리치가 있습니다. 경우에 따라 (항상은 아니지만) 아이콘의 측면에서 색상을 올바르게 변경하지 않습니다 (스팬 상자 외부에있는 부분). 마우스 오버시 실패하거나 마우스 아웃시 원래 색상으로 되돌아 오는 경우가 있습니다. .이 수정 1S ~ 후

에 MouseOver 실패 :

mouseover failed http://i.picresize.com/images/2014/02/21/kaQTN.png

로 마우스를 실패 :

mouseout failed http://i.picresize.com/images/2014/02/21/Buvg.png

참고 : 글자 간격을 1.1em 이상으로 변경하면 아이콘의 오른쪽에있는 문제를 해결하는 것처럼 보이지만 왼쪽에 문제를 해결할 방법을 찾을 수 없습니다. 오류의

DEMO는 :http://www.bootply.com/116686

출처

2014-02-21 Nazareno Lorenzo

당신이 JSfiddle에 작업 예제를 제공 할 수 즐거운 코딩을? 어둠 속에서 왼쪽으로 패딩을 추가하면 문제가 해결됩니다. –

http://www.bootply.com/116686 왼쪽을보십시오 –

안녕 Nazareno, 해결책이 당신을 위해 작동하는 경우에, 당신은 받아 들인 응답으로 나의 응답을 표시 할 수 있습니까? 이렇게하면 같은 문제를 가진 다른 사람들이이 닫힌 질문을 찾을 수 있습니다. 감사! :) –

난 당신을위한 해결책을 찾아 냈다. 아이콘이 제공되는 전체 공간을 차지하지 못하는 것으로 나타났습니다.

적어도이 문제를 해결하려면 부스랩과 함께 제공되는 iconset에 다음 css 속성을 추가하십시오. 이 메모리는 바로 내를 제공하는 경우 전체 라이브러리를 효과 때문에

.glyphicon-sound-dolby:before { 
    content: "\e190"; 
    padding: .1em; 
}

나는 일반 아이콘 클래스에 넣어 것입니다. before : : 클래스 이름 다음에 올 것이다. 오래 전에 도서관에서 일한 적이 없으므로 내가 말하고자하는 아이콘을 대상으로 삼으십시오.

:before, :after{ 
    box-sizing: border-box; 
    padding: .1em; 
}

출처

2014-02-26 08:59:36

아이콘 글꼴 및 CSS 변경 색상이있는 버그

답변

관련 문제