將深度/尺寸添加到圖標字體？

我想在圖標周圍放一個邊框，即給出一些深度或尺寸，但它看起來不像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; 
}

來源

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

這確實有效，它只是不太美觀而已。這就是爲什麼我想知道除了「文字陰影」之外的東西是否會產生更好的效果。我寧願讓它看起來像一個凸起的按鈕。 –

我假設你排除了任何默認引導按鈕的外觀。除此之外，我想你可以製作你的按鈕圖形（減少箭頭）並將其作爲空白，然後使用CSS將寬度和高度縮放到100％。雖然看起來有些複雜，但與首先使用圖標字體的原因相反。可能更容易使用普通的照片按鈕。我有興趣看看是否有其他建議。 –

將深度/尺寸添加到圖標字體？

回答

相關問題