Memasang Fons Ansome Blog Krizeer

After you get up and running, you can place Font Awesome icons just about
anywhere with the <i> tag.
Some examples appreciatively re-used from the Bootstrap documentation.

Inline Icons

fa-camera-retro

Place Font Awesome icons just about anywhere with the <i> tag.

<i class="fa fa-camera-retro"></i> fa-camera-retro

Icon classes are echoed via CSS :before.

Larger Icons

fa-camera-retro
fa-camera-retro
fa-camera-retro
fa-camera-retro
fa-camera-retro

To increase icon sizes relative to their container, use the fa-lg (33% increase), fa-2x,
fa-3x, fa-4x, or fa-5x classes.

<p><i class="fa fa-camera-retro fa-lg"></i> fa-camera-retro</p>
<p><i class="fa fa-camera-retro fa-2x"></i> fa-camera-retro</p>
<p><i class="fa fa-camera-retro fa-3x"></i> fa-camera-retro</p>
<p><i class="fa fa-camera-retro fa-4x"></i> fa-camera-retro</p>
<p><i class="fa fa-camera-retro fa-5x"></i> fa-camera-retro</p>

If your icons are getting chopped off on top and bottom, make sure you have
sufficient line-height.

Fixed Width Icons

•   Home
•   Library
•   Applications
•   Settings

Use fa-fw to set icons at a fixed width. Great to use when variable icon widths throw off alignment.
Especially useful in things like nav lists.

<ul class="nav nav-pills nav-stacked">
  <li class="active"><a href="#"><i class="fa fa-home fa-fw"></i> Home</a></li>
  <li><a href="#"><i class="fa fa-book fa-fw"></i> Library</a></li>
  <li><a href="#"><i class="fa fa-pencil fa-fw"></i> Applications</a></li>
  <li><a href="#"><i class="fa fa-cogs fa-fw"></i> Settings</a></li>
</ul>

List Icons

• List icons (like these)
• can be used
• to easily replace
• default bullets in lists

Use fa-ul and fa-li to easily replace default bullets in unordered lists.

<ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square"></i>List icons (like these)</li>
  <li><i class="fa-li fa fa-check-square"></i>can be used</li>
  <li><i class="fa-li fa fa-spinner fa-spin"></i>to replace</li>
  <li><i class="fa-li fa fa-square"></i>default bullets in lists</li>
</ul>

Bordered & Pulled Icons

Use a few styles together and you'll have easy pull quotes or a great introductory article icon.

Use fa-border and pull-right or pull-left for easy pull quotes or
article graphics.

<i class="fa fa-quote-left fa-2x pull-left fa-border"></i>
Use a few styles together and you'll have easy pull quotes or a great introductory article icon.

Spinning Icons

Use the fa-spin class to get any icon to rotate. Works well with fa-spinner,
fa-refresh, and fa-cog.

<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>

CSS3 animations aren't supported in IE8 - IE9.

Rotated & Flipped

  normal

  fa-rotate-90

  fa-rotate-180

  fa-rotate-270

  fa-flip-horizontal

  fa-flip-vertical

To arbitrarily rotate and flip icons, use the fa-rotate-* and fa-flip-* classes.

<i class="fa fa-shield"></i>&nbsp; normal<br>
<i class="fa fa-shield fa-rotate-90"></i>&nbsp; fa-rotate-90<br>
<i class="fa fa-shield fa-rotate-180"></i>&nbsp; fa-rotate-180<br>
<i class="fa fa-shield fa-rotate-270"></i>&nbsp; fa-rotate-270<br>
<i class="fa fa-shield fa-flip-horizontal"></i>&nbsp; fa-flip-horizontal<br>
<i class="fa fa-shield fa-flip-vertical"></i>&nbsp; icon-flip-vertical

Stacked Icons

fa-twitter on fa-square-o





fa-flag on fa-circle





fa-terminal on fa-square





fa-ban on fa-camera

To stack multiple icons, use the fa-stack class on the parent, the fa-stack-1x
for the regularly sized icon, and fa-stack-2x for the larger icon. fa-inverse
can be used as an alternative icon color. You can even throw larger icon classes on the parent
to get further control of sizing.

<span class="fa-stack fa-lg">
  <i class="fa fa-square-o fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x"></i>
</span>
fa-twitter on fa-square-o<br>
<span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>
fa-flag on fa-circle<br>
<span class="fa-stack fa-lg">
  <i class="fa fa-square fa-stack-2x"></i>
  <i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
</span>
fa-terminal on fa-square<br>
<span class="fa-stack fa-lg">
  <i class="fa fa-camera fa-stack-1x"></i>
  <i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>
fa-ban on fa-camera

Bootstrap 3 Examples

Delete

Settings


Font Awesome
Version 4.0.3

User

• Edit
• Delete
• Ban
• Make admin

Font Awesome works great with the full range of Bootstrap components.

<a class="btn btn-danger" href="#">
  <i class="fa fa-trash-o fa-lg"></i> Delete</a>
<a class="btn btn-default btn-sm" href="#">
  <i class="fa fa-cog"></i> Settings</a>

<a class="btn btn-lg btn-success" href="#">
  <i class="fa fa-flag fa-2x pull-left"></i> Font Awesome<br>Version 4.0.3</a>

<div class="btn-group">
  <a class="btn btn-default" href="#"><i class="fa fa-align-left"></i></a>
  <a class="btn btn-default" href="#"><i class="fa fa-align-center"></i></a>
  <a class="btn btn-default" href="#"><i class="fa fa-align-right"></i></a>
  <a class="btn btn-default" href="#"><i class="fa fa-align-justify"></i></a>
</div>

<div class="input-group margin-bottom-sm">
  <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
  <input class="form-control" type="text" placeholder="Email address">
</div>
<div class="input-group">
  <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
  <input class="form-control" type="password" placeholder="Password">
</div>

<div class="btn-group open">
  <a class="btn btn-primary" href="#"><i class="fa fa-user fa-fw"></i> User</a>
  <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
    <span class="fa fa-caret-down"></span></a>
  <ul class="dropdown-menu">
    <li><a href="#"><i class="fa fa-pencil fa-fw"></i> Edit</a></li>
    <li><a href="#"><i class="fa fa-trash-o fa-fw"></i> Delete</a></li>
    <li><a href="#"><i class="fa fa-ban fa-fw"></i> Ban</a></li>
    <li class="divider"></li>
    <li><a href="#"><i class="i"></i> Make admin</a></li>
  </ul>
</div>

Cara Membuat Permalink Blog Krizeer

Terimakasih telah membaca artikel . Anda bisa bookmark halaman ini dengan URL . Jika ingin Copy Paste silahkan Cantumkan Link Sumber nya, Salam Smart Education Terimakasih.

Pre Code Parser Blog Krizeer

Konversi & menjadi &

Konversi ' menjadi '

Konversi " menjadi "

Konversi < menjadi <

Konversi > menjadi >

Tag Pre Blog Krizeer

Use this Cascading Style Sheets, CSS Compressor to compress CSS to reduce CSS code size and make your web pages load faster. You can select from four levels of compression, depending on how legible you want the compressed CSS to be versus degree of compression. It is quick, easy and free!

<div id='menu'>
<div class='menu'>
<ul>
<li><a expr:title='data:blog.title' href='/'>Home</a></li>
<li><a href='//plus.google.com/102378255170044980225' title='About Me'>About Me</a></li>
<li><a href='//www.facebook.com/messages/joseph.fernandio' title='Contact'>Contact</a></li>
<li><a href='/p/site-map.html' title='Site Map'>Site Map</a></li>
<li><a href='/p/privacy-policy.html' title='Privacy Policy'>Privacy Policy</a></li>
<li><a href='/p/term-of-use.html' title='Term Of Use'>TOS</a></li>
<li><a href='?m=1' title='Mobile Version'>Mobile</a></li>
</ul>
<!-- Clock -->
<div id='clock'>
<script type='text/javascript'>
 window.setTimeout(&quot;hour()&quot;,1000);
 function hour() {
 var date = new Date();
 setTimeout(&quot;hour()&quot;,1000);
document.getElementById(&quot;clock&quot;).innerHTML = date.getHours()+&quot;:&quot;+date.getMinutes()+&quot;:&quot;+date.getSeconds();
 }
</script>
</div>
<!-- Clock End -->
<!-- Form Search -->
<form action='/search' id='search' method='get'>
<input name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search Here...&quot;;}' onfocus='if (this.value == &quot;Search Here...&quot;) {this.value = &quot;&quot;}' size='40' type='text' value='Search Here...'/>
</form>
<!-- Form Search End -->
</div>
</div>

Tenyata Yoga Pratama Belum Pernah Pacaran

Selamat Datang di Google Developers Live
Google Developers Live (GDL) memanfaatkan kehebatan presentasi langsung, Tanya Jawab forum pengembang, dan jangkauan global internet yang menghadirkan konten streaming langsung bagi Anda untuk pengembang banyak platform Google, termasuk Android, Chrome, Cloud, Maps, YouTube, dan lainnya. Pelajari lebih lanjut.

Kinerja Web
Pelajari lebih lanjut tentang alat kinerja web di Google, termasuk ekstensi browser dan API untuk Insights, Layanan PageSpeed, dan perpustakaan pengoptimalan kami.

Blog Yoga Pratama Kuningan Jawa Barat Indonesia

Selamat Datang di Google Developers Live
Google Developers Live (GDL) memanfaatkan kehebatan presentasi langsung, Tanya Jawab forum pengembang, dan jangkauan global internet yang menghadirkan konten streaming langsung bagi Anda untuk pengembang banyak platform Google, termasuk Android, Chrome, Cloud, Maps, YouTube, dan lainnya. Pelajari lebih lanjut.

Kinerja Web
Pelajari lebih lanjut tentang alat kinerja web di Google, termasuk ekstensi browser dan API untuk Insights, Layanan PageSpeed, dan perpustakaan pengoptimalan kami.

TV One Dijual Dengan Harga 4 Juta

Selamat Datang di Google Developers Live
Google Developers Live (GDL) memanfaatkan kehebatan presentasi langsung, Tanya Jawab forum pengembang, dan jangkauan global internet yang menghadirkan konten streaming langsung bagi Anda untuk pengembang banyak platform Google, termasuk Android, Chrome, Cloud, Maps, YouTube, dan lainnya. Pelajari lebih lanjut.

Kinerja Web
Pelajari lebih lanjut tentang alat kinerja web di Google, termasuk ekstensi browser dan API untuk Insights, Layanan PageSpeed, dan perpustakaan pengoptimalan kami.

Beri Masukan
Ada komentar atau pertanyaan tentang PageSpeed Insights? Kirim masukan atau diskusikan di milis kami.

Tentang PageSpeed Insights
PageSpeed Insights menganalisis konten laman web, lalu memberikan saran agar laman jadi lebih cepat. Pelajari Lebih Lanjut.