Question

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

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

下面是一个JSFiddle演示的链接（其HTML和CSS也在下面显示），带有向上和向下箭头，我希望看起来更有纹理：

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 */
}

为图标字体添加深度/尺寸？

1 个答案: