After you get up and running, you can place Elusive Icons icons just about
anywhere with the <i> tag.
Some examples appreciatively re-used from the Bootstrap documentation.
el-camera-retro
You can place Elusive Icons icons just about anywhere using the CSS Prefix fa and the icon's
name. Elusive Icons 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="el el-camera-retro"></i> el-camera-retro
el-lg
el-2x
el-3x
el-4x
el-5x
To increase icon sizes relative to their container, use the el-lg (33% increase), el-2x,
el-3x, el-4x, or el-5x classes.
<i class="el el-camera-retro el-lg"></i> el-lg
<i class="el el-camera-retro el-2x"></i> el-2x
<i class="el el-camera-retro el-3x"></i> el-3x
<i class="el el-camera-retro el-4x"></i> el-4x
<i class="el el-camera-retro el-5x"></i> el-5x
Use el-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="el el-home el-fw"></i> Home</a>
<a class="list-group-item" href="#"><i class="el el-book el-fw"></i> Library</a>
<a class="list-group-item" href="#"><i class="el el-pencil el-fw"></i> Applications</a>
<a class="list-group-item" href="#"><i class="el el-cog el-fw"></i> Settings</a>
</div>
Use el-ul and el-li to easily replace default bullets in unordered lists.
<ul class="el-ul">
<li><i class="el-li fa el-check-square"></i>List icons</li>
<li><i class="el-li fa el-check-square"></i>can be used</li>
<li><i class="el-li fa el-spinner el-spin"></i>as bullets</li>
<li><i class="el-li fa el-square"></i>in lists</li>
</ul>
…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.
Use el-border and pull-right or pull-left for easy pull quotes or
article icons.
<i class="el el-quote-left el-3x pull-left el-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.
Use the el-spin class to get any icon to rotate, and use el-pulse to have it rotate
with 8 steps. Works well with el-spinner, el-refresh, and el-cog.
<i class="el el-spinner el-spin"></i>
<i class="el el-circle-o-notch el-spin"></i>
<i class="el el-refresh el-spin"></i>
<i class="el el-cog el-spin"></i>
<i class="el el-spinner el-pulse"></i>
CSS3 animations aren't supported in IE8 - IE9.
normal
el-rotate-90
el-rotate-180
el-rotate-270
el-flip-horizontal
el-flip-vertical
To arbitrarily rotate and flip icons, use the el-rotate-* and el-flip-* classes.
<i class="el el-shield"></i> normal<br>
<i class="el el-shield el-rotate-90"></i> el-rotate-90<br>
<i class="el el-shield el-rotate-180"></i> el-rotate-180<br>
<i class="el el-shield el-rotate-270"></i> el-rotate-270<br>
<i class="el el-shield el-flip-horizontal"></i> el-flip-horizontal<br>
<i class="el el-shield el-flip-vertical"></i> icon-flip-vertical
To stack multiple icons, use the el-stack class on the parent, the el-stack-1x
for the regularly sized icon, and el-stack-2x for the larger icon. el-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="el-stack el-lg">
<i class="el el-square-o el-stack-2x"></i>
<i class="el el-twitter el-stack-1x"></i>
</span>
el-twitter on el-square-o<br>
<span class="el-stack el-lg">
<i class="el el-circle el-stack-2x"></i>
<i class="el el-flag el-stack-1x el-inverse"></i>
</span>
el-flag on el-circle<br>
<span class="el-stack el-lg">
<i class="el el-square el-stack-2x"></i>
<i class="el el-terminal el-stack-1x el-inverse"></i>
</span>
el-terminal on el-square<br>
<span class="el-stack el-lg">
<i class="el el-camera el-stack-1x"></i>
<i class="el el-ban el-stack-2x text-danger"></i>
</span>
el-ban on el-camera
Elusive Icons works great with the full range of Bootstrap components.
<a class="btn btn-danger" href="#">
<i class="el el-trash-o el-lg"></i> Delete</a>
<a class="btn btn-default btn-sm" href="#">
<i class="el el-cog"></i> Settings</a>
<a class="btn btn-lg btn-success" href="#">
<i class="el el-flag el-2x pull-left"></i> Elusive Icons<br>Version 2.0.0</a>
<div class="btn-group">
<a class="btn btn-default" href="#"><i class="el el-align-left"></i></a>
<a class="btn btn-default" href="#"><i class="el el-align-center"></i></a>
<a class="btn btn-default" href="#"><i class="el el-align-right"></i></a>
<a class="btn btn-default" href="#"><i class="el el-align-justify"></i></a>
</div>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon"><i class="el el-envelope-o el-fw"></i></span>
<input class="form-control" type="text" placeholder="Email address">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="el el-key el-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="el el-user el-fw"></i> User</a>
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
<span class="el el-caret-down"></span></a>
<ul class="dropdown-menu">
<li><a href="#"><i class="el el-pencil el-fw"></i> Edit</a></li>
<li><a href="#"><i class="el el-trash-o el-fw"></i> Delete</a></li>
<li><a href="#"><i class="el el-ban el-fw"></i> Ban</a></li>
<li class="divider"></li>
<li><a href="#"><i class="i"></i> Make admin</a></li>
</ul>
</div>
Anything you can do with CSS font styles, you can do with Elusive Icons.
Star Ratings (inspired by CSS Tricks)