git.roojs.org Git - bootswatch/blob - bower_components/font-awesome/src/_includes/examples/rotated-flipped.html

   1 <section id="rotated-flipped">
   2   <h2 class="page-header">Rotated &amp; Flipped</h2>
   3   <div class="row">
   4     <div class="col-md-3 col-sm-4">
   5       <p style="font-size: 18px;">
   6         <i class="fa fa-shield"></i>&nbsp; normal<br>
   7         <i class="fa fa-shield fa-rotate-90"></i>&nbsp; fa-rotate-90<br>
   8         <i class="fa fa-shield fa-rotate-180"></i>&nbsp; fa-rotate-180<br>
   9         <i class="fa fa-shield fa-rotate-270"></i>&nbsp; fa-rotate-270<br>
  10         <i class="fa fa-shield fa-flip-horizontal"></i>&nbsp; fa-flip-horizontal<br>
  11         <i class="fa fa-shield fa-flip-vertical"></i>&nbsp; fa-flip-vertical
  12       </p>
  13     </div>
  14     <div class="col-md-9 col-sm-8">
  15       <p>
  16         To arbitrarily rotate and flip icons, use the <code>fa-rotate-*</code> and <code>fa-flip-*</code> classes.
  17       </p>
  18 {% highlight html %}
  19 <i class="fa fa-shield"></i>&nbsp; normal<br>
  20 <i class="fa fa-shield fa-rotate-90"></i>&nbsp; fa-rotate-90<br>
  21 <i class="fa fa-shield fa-rotate-180"></i>&nbsp; fa-rotate-180<br>
  22 <i class="fa fa-shield fa-rotate-270"></i>&nbsp; fa-rotate-270<br>
  23 <i class="fa fa-shield fa-flip-horizontal"></i>&nbsp; fa-flip-horizontal<br>
  24 <i class="fa fa-shield fa-flip-vertical"></i>&nbsp; icon-flip-vertical
  25 {% endhighlight %}
  26     </div>
  27   </div>
  28 </section>