Font Awesome is really Awesome because it contain what you have been looking for to enhance your Web Development both for Desktop and Mobil Applications
After you get up and running, you can place Font Awesome icons just about anywhere with the
Try this out copy and paste this in the in between the head tag <head></head>
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.
Try this out copy and paste this in the in between the head tag <head></head>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"
Copy and past this on in between the body tag <body></body> and see what i am talking about for a start.
Larger Icons
<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>
Fixed Width Icons
<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
<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
<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
<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>
Best of Look
No comments:
Post a Comment