Web developers all over the world, like myself, are looking for classical yet simple ways to give their websites the beauty it needs. in today's post, in continuation of web design, I will share with us an iconic font and CSS toolkit that you need to transform your website.
If you have ever been stock on where and how to get icons into your website, this tools gives you full suite of 585 pictographic icons (more always added in new version) for easy scalable vector graphics on websites that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.
Let Get Started! The name is Font Awesome!
Font Awesome was created, and being maintained by Dave Gandy.Setting up Font Awesome can be as simple as adding two lines of code to your website, or you can be a pro and customize the LESS yourself! Font Awesome even plays nicely with Bootstrap 3!
You can set it up in any of these five steps:
EASIEST: BootstrapCDN by MaxCDN
You can use Bootstrap CDN to add Font Awesome into your website with a single line of code. You don't even have to download or install anything!-
Paste the following code into the
<head>section of your site's HTML.<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> - Check out the examples at the bottom of this post.
- I used this method to implement all the examples in this post.
EASY: Default CSS
Use this method to get the default Font Awesome CSS.
- Download From Here.
- Copy the entire
font-awesomedirectory into your project. -
In the
<head>of your html, reference the location to your font-awesome.min.css.<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css"> - Check out the examples at the bottom of this post.
EASY: LESS Ruby Gem
Use the Official Font Awesome LESS Ruby Gem to easily get Font Awesome LESS into a Rails project.-
Add this line to your application's Gemfile:
gem 'font-awesome-less' -
And then execute:
$ bundle - Or install it yourself as:
$ gem install font-awesome-less
application.less:
@import "font-awesome-sprockets";
@import "font-awesome";
EASY: SASS Ruby Gem
Use the Official Font Awesome SASS Ruby Gem to easily get Font Awesome SASS into a Rails or Compass project.-
Add this line to your application's Gemfile:
gem 'font-awesome-sass' -
And then execute:
$ bundle - Or install it yourself as:
$ gem install font-awesome-sass
application.scss:
@import "font-awesome-sprockets";
@import "font-awesome";
PRO: Custom LESS or SASS
Use this method to customize Font Awesome 4.4.0 using LESS or SASS.- Copy the
font-awesome/directory into your project. -
Open your project's
font-awesome/less/variables.lessorfont-awesome/scss/_variables.scssand edit the@fa-font-pathor$fa-font-pathvariable to point to your font directory.@fa-font-path: "../font";The font path is relative from your compiled CSS directory. - Re-compile your LESS or SASS if using a static compiler. Otherwise, you should be good to go.
- Check out the examples at the bottom of this post.
Troubleshooting
If you're having trouble with Font Awesome, make sure to check out the troubleshooting wiki page.EXAMPLES:
After you get up and running, you can place Font Awesome icons just about
anywhere with the <i> tag.
Basic Icons
You can place Font Awesome icons just about anywhere using the CSS Prefix
fa and the icon's
name. Font Awesome is designed to be used with inline elements (we like the <i> tag for
brevity, but using a <span> is more semantically correct).
<i class="fa fa-camera-retro"></i><i class="fa fa-car"></i> <i class="fa fa-spinner fa-spin"></i>-
Results:
- If you change the font-size of the icon's container, the icon gets bigger. Same things goes for color, drop shadow, and anything else that gets inherited using CSS.
fa-camera-retro
fa-car
fa-spinner fa-spin
Larger Icons
To increase icon sizes relative to their container, use the
fa-lg (33% increase), fa-2x,
fa-3x, fa-4x, or fa-5x classes.
<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x-
Results:
- If your icons are getting chopped off on top and bottom, make sure you have sufficient line-height.
fa-lg
fa-2x
fa-3x
fa-4x
fa-5x
Fixed Width Icons
Use
Results:fa-fw to set icons at a fixed width. Great to use when different icon widths throw off alignment.
Especially useful in things like nav lists & list groups.
<div class="list-group">
<a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i> Home</a>
<a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i> Library</a>
<a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i> Applications</a>
<a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i> Settings</a>
</div>
List Icons
Use
Results: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</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>as bullets</li>
<li><i class="fa-li fa fa-square"></i>in lists</li>
</ul>
- List icons
- can be used
- as bullets
- in lists
Bordered & Pulled Icons
Use
Result:fa-border and fa-pull-right or fa-pull-left for easy pull quotes or
article icons.
<i class="fa fa-quote-left fa-3x fa-pull-left fa-border"></i>
...tomorrow we will run faster, stretch out our arms farther...
And then one fine morning— So we beat on, boats against the
current, borne back ceaselessly into the past.
...tomorrow we will run faster, stretch out our arms farther... And then one fine morning— So we beat on, boats against the current, borne back ceaselessly into the past.
Animated Icons
Use thefa-spin class to get any icon to rotate, and use fa-pulse to have it rotate
with 8 steps. Works well with fa-spinner, fa-refresh, and fa-cog.
<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-circle-o-notch fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>
<i class="fa fa-spinner fa-pulse"></i>
-
Results:
- Some browsers on some platforms have issues with animated icons resulting in a jittery wobbling effect. See issue #671 for examples and possible workarounds.
- CSS3 animations aren't supported in IE8 - IE9.
Rotated & Flipped
To arbitrarily rotate and flip icons, use the
Results:fa-rotate-* and fa-flip-* classes.
<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
normal
fa-rotate-90
fa-rotate-180
fa-rotate-270
fa-flip-horizontal
icon-flip-vertical
Stacked Icons
To stack multiple icons, use thefa-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
Results: fa-flag on fa-circle
fa-terminal on fa-square
fa-ban on fa-camera
No comments:
Post a Comment
DISCLAIMER: Comments are opinions of those that posted it and are subject to moderation.