아이콘 글꼴에 깊이/치수 추가?

아이콘 주위에 경계선을 넣으려고합니다. 즉, CSS의 text-shadow 속성을 사용해야하는 모양이 아닙니다.아이콘 글꼴에 깊이/치수 추가?

나는 Twitter Bootstrap과 함께 사용되는 FontAwesome icon collection을 사용하고 있습니다.

HTML :

내가 더 질감을보고 싶습니다 아래 화살표와 (HTML 및 CSS 또한 아래 그림)을 JSFiddle 데모에 대한 링크입니다

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap.no-icons.min.css" rel="stylesheet"> 
<link href="//netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css" rel="stylesheet"> 

<ul class='well'> 
    <li class='alignCenter'> 
    <i class='icon-caret-up icon-green icon-4x'></i> 
    </li> 
    <li class='voteTots alignCenter' >3</li>    
    <li class='alignCenter'> 
    <i class=' icon-caret-down icon-gray icon-4x'></i>   
    </li> 
</ul>

CSS :

body { 
    font-size:200%; /* resets the page font size */ 
} 
ul li.alignCenter{ 
    margin:auto; 
    width:50%; 
    text-align:center; 
} 
.icon-green{ 
    color:#58A279;  
} 
.icon-gray{ 
    color:gray; 
} 
.voteTots{ 
    font-size:60px; 
    color:#666; 
}

출처

2013-01-06 tim peterson

사용 * 내부 * 텍스트, 밖에. "내부"상자 그림자 효과로 할 수있는 것을 수행하는 것을 포함하는 텍스트에 CSS 효과가 없다고 생각하지 않습니다. 있다면 정말 좋을 것 같습니다. – Pointy

는 당신 확인 텍스트 그림자 네가 원하는게 아니야?

확인이 아웃 : http://jsfiddle.net/panchroma/PcmNC/17/

당신은 그림자를 넣을 수 없습니다

.shadow { 
text-shadow: 5px 5px 5px #666; /* horizontal vertical blur colour */ 
}

출처

2013-01-06 18:25:39

그것은 작동하지 않습니다, 그저 아주 asthetically 기쁘게. 그래서'text-shadow '이외의 것이 더 좋은 효과를 내는지 궁금합니다. 오히려 제기 된 단추처럼 보이게 할 수 있습니다. –

기본 부트 스트랩 버튼의 모양을 배제했다고 가정합니다. 그것 이외에, 나는 당신이 당신의 버튼 (화살표 머리가 적은)의 그래픽을 만들고 그것을 배경으로 포함시킨 다음, CSS를 사용하여 너비와 높이를 100 %로 스케일링 할 수 있다고 생각합니다. 그래도 조금 뒤얽힌 것 같아서 처음에는 아이콘 글꼴을 사용하는 이유와 반대가됩니다. 아마 일반 grapic 버튼을 사용하는 것이 더 쉽습니다. 나는 다른 제안이 있는지보고 싶다. –

아이콘 글꼴에 깊이/치수 추가?

답변

관련 문제