CODEWITHSUNDEEP
htmlcsstwitter-bootstrapfont-awesome
Olivier Zoletti
Olivier Zoletti

Reputation: 317

How to wrap Font-Awesome with CSS?

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

I have this: what I have

I want something like this: what I want

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;
}

Upvotes: 1

Views: 694

Answers (2)

Carrie Kendall
Carrie Kendall

Reputation: 11223

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

Upvotes: 3

Mathias Rechtzigel
Mathias Rechtzigel

Reputation: 3604

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/

Upvotes: 0

Related Questions