如何使用CSS包装Font-Awesome？

Question

I am using bootstrap & font awesome, and i am looking to make something like this:

I have this:

I want something like this:

Markup:

<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

You'll need to set a height to the container and then you can hide the overflow of the nested font-awesome icon, using 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

You would create a container around the icon that has the property of over-flow: hidden; You can then position the element inside however you want.

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