<section id="rotated-flipped">
<h2 class="page-header">Rotated & Flipped</h2>
<div class="row">
- <div class="span3">
- A set of classes that can be used to arbitrarily rotate and flip icons.
+ <div class="col-md-3 col-sm-4">
+ <p style="font-size: 18px;">
+ <i class="fa fa-shield"></i> normal<br>
+ <i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90<br>
+ <i class="fa fa-shield fa-rotate-180"></i> fa-rotate-180<br>
+ <i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270<br>
+ <i class="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal<br>
+ <i class="fa fa-shield fa-flip-vertical"></i> fa-flip-vertical
+ </p>
</div>
- <div class="span9">
- <div class="well well-large well-transparent lead">
- <i class="icon-shield"></i> normal<br>
- <i class="icon-shield icon-rotate-90"></i> icon-rotate-90<br>
- <i class="icon-shield icon-rotate-180"></i> icon-rotate-180<br>
- <i class="icon-shield icon-rotate-270"></i> icon-rotate-270<br>
- <i class="icon-shield icon-flip-horizontal"></i> icon-flip-horizontal<br>
- <i class="icon-shield icon-flip-vertical"></i> icon-flip-vertical
- </div>
+ <div class="col-md-9 col-sm-8">
+ <p>
+ To arbitrarily rotate and flip icons, use the <code>fa-rotate-*</code> and <code>fa-flip-*</code> classes.
+ </p>
{% highlight html %}
-<i class="icon-shield"></i> normal<br>
-<i class="icon-shield icon-rotate-90"></i> icon-rotate-90<br>
-<i class="icon-shield icon-rotate-180"></i> icon-rotate-180<br>
-<i class="icon-shield icon-rotate-270"></i> icon-rotate-270<br>
-<i class="icon-shield icon-flip-horizontal"></i> icon-flip-horizontal<br>
-<i class="icon-shield icon-flip-vertical"></i> icon-flip-vertical
+<i class="fa fa-shield"></i> normal<br>
+<i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90<br>
+<i class="fa fa-shield fa-rotate-180"></i> fa-rotate-180<br>
+<i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270<br>
+<i class="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal<br>
+<i class="fa fa-shield fa-flip-vertical"></i> icon-flip-vertical
{% endhighlight %}
- <p class="alert alert-info">
- <i class="icon-info-sign"></i> Rotating and flipping icons aren't yet supported in IE7.
- </p>
</div>
</div>
</section>