0

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

我正在使用与Twitter Bootstrap一起使用的FontAwesome 图标集合。

下面是一个 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;
}
4

1 回答 1

0

你确定文字阴影不是你想要的吗？

看看这个：http: //jsfiddle.net/panchroma/PcmNC/17/

用途 

.shadow {
text-shadow: 5px 5px 5px #666; /* horizontal vertical blur colour */
}
于 2013-01-06T18:25:39.210 回答