如何使用CSS包裝Font-Awesome？

Question

我正在使用bootstrap和字體真棒，我希望做這樣的事情：

我有這個：

我想要這樣的東西：

標記：

<div class="alert alert-success"><i class="fa fa-paperclip icon-alert"></i> Everything was edited!</div>

CSS：

.icon-alert {
  font-size: 30px;
  float: left;
  margin-right: 10px;
  opacity: 0.7;
}

Answer 1

你需要為容器設置一個高度，然后你可以使用overflow:hidden嵌套字體 - awesome圖標的overflow:hidden 。

CSS ：

.clipped-alert{
  overflow:hidden;
  height:55px;
}

HTML ：

<div class="clipped-alert alert alert-success">
    <i class="fa fa-paperclip fa-5x icon-alert pull-right text-success"></i> 
    Everything was edited!
</div>

---

DEMO

Answer 2

您將在圖標周圍創建一個具有over-flow: hidden;屬性的容器over-flow: hidden; 然后，您可以根據需要將元素放置在內部。

http://jsfiddle.net/MathiasaurusRex/W9WC2/1/