twitter-bootstrap - 向图标字体添加深度/尺寸？

Question

我想在图标周围放置一个边框，即提供一些深度或尺寸，但它看起来不像我应该使用的 CSS 的 text-shadow 属性。

我正在使用 FontAwesome icon collection与 Twitter Bootstrap 一起使用.

下面是一个 JSFiddle 演示的链接(其 HTML 和 CSS 也显示在下面)，带有上下箭头，我希望它看起来更有质感:

http://jsfiddle.net/trpeters1/PcmNC/14/

HTML:

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

Answer 1

您确定文本阴影不是您想要的吗？

检查一下:http://jsfiddle.net/panchroma/PcmNC/17/

使用

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