mirror of
https://github.com/pierre42100/ComunicWeb
synced 2025-07-14 23:18:08 +00:00
First commit
This commit is contained in:
@ -0,0 +1 @@
|
||||
<script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&serve=C6SDP2Y&placement=fontawesome" id="_fusionads_js"></script>
|
@ -0,0 +1,5 @@
|
||||
<h4><i class="fa fa-warning"></i> Warning!</h4>
|
||||
Apparently, Adblock Plus can remove Font Awesome brand icons with their "Remove Social
|
||||
Media Buttons" setting. We will not use hacks to force them to display. Please
|
||||
<a href="https://adblockplus.org/en/bugs" class="alert-link">report an issue with Adblock Plus</a> if you believe this to be
|
||||
an error. To work around this, you'll need to modify the social icon class names.
|
@ -0,0 +1,5 @@
|
||||
<ul class="margin-bottom-none padding-left-lg">
|
||||
<li>All brand icons are trademarks of their respective owners.</li>
|
||||
<li>The use of these trademarks does not indicate endorsement of the trademark holder by Font Awesome, nor vice versa.</li>
|
||||
<li>Brand icons should only be used to represent the company or product to which they refer.</li>
|
||||
</ul>
|
6
assets/adminLTE/plugins/font-awesome/src/_includes/code/core.less
vendored
Normal file
6
assets/adminLTE/plugins/font-awesome/src/_includes/code/core.less
vendored
Normal file
@ -0,0 +1,6 @@
|
||||
display: inline-block;
|
||||
font: normal normal normal @fa-font-size-base/@fa-line-height-base FontAwesome; // shortening font declaration
|
||||
font-size: inherit; // can't have font-size inherit on line above, so need to override
|
||||
text-rendering: auto; // optimizelegibility throws things off #1094
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
6
assets/adminLTE/plugins/font-awesome/src/_includes/code/core.scss
vendored
Normal file
6
assets/adminLTE/plugins/font-awesome/src/_includes/code/core.scss
vendored
Normal file
@ -0,0 +1,6 @@
|
||||
display: inline-block;
|
||||
font: normal normal normal #{$fa-font-size-base}/#{$fa-line-height-base} FontAwesome; // shortening font declaration
|
||||
font-size: inherit; // can't have font-size inherit on line above, so need to override
|
||||
text-rendering: auto; // optimizelegibility throws things off #1094
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
4
assets/adminLTE/plugins/font-awesome/src/_includes/code/license.css
vendored
Normal file
4
assets/adminLTE/plugins/font-awesome/src/_includes/code/license.css
vendored
Normal file
@ -0,0 +1,4 @@
|
||||
/*!
|
||||
* Font Awesome {{ site.fontawesome.version }} by @{{ site.fontawesome.author.twitter }} - {{ site.fontawesome.url }} - @{{ site.fontawesome.twitter }}
|
||||
* License - {{ site.fontawesome.url }}/license (Font: {{ site.fontawesome.license.font.version }}, CSS: {{ site.fontawesome.license.code.version }})
|
||||
*/
|
@ -0,0 +1,22 @@
|
||||
<div id="getting-support">
|
||||
<h2 class="page-header">Getting Support</h2>
|
||||
<p>
|
||||
Having trouble getting Font Awesome up and running? Something not working the way you think it should? I hate that
|
||||
I don't have time to answer Font Awesome support emails anymore. So here are some things you might wanna do:
|
||||
</p>
|
||||
<ol>
|
||||
<li>
|
||||
Make sure you've read the latest version of how to <a href="{{ page.relative_path }}get-started/">get started</a>.
|
||||
It's been updated recently to make Font Awesome even easier to use.
|
||||
</li>
|
||||
<li>
|
||||
Check out the <a href="http://stackoverflow.com/questions/tagged/font-awesome">existing questions tagged as
|
||||
Font Awesome</a> over on Stack Overflow. Other folks might have had the same question you've had.
|
||||
</li>
|
||||
<li>
|
||||
Can't find the answer to your question on Stack Overflow?
|
||||
<a href="http://stackoverflow.com/questions/ask?tags=font-awesome">Ask a new question</a>, then
|
||||
<a href="mailto:{{ site.fontawesome.author.email }}">send me an email</a> and I might be able to take a look.
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
@ -0,0 +1,7 @@
|
||||
<section id="project-milestones">
|
||||
<h2 class="page-header">Project Milestones</h2>
|
||||
<p>
|
||||
Want to keep up with what's planned for Font Awesome? Check out our
|
||||
<a href="{{ site.fontawesome.github.url }}/milestones">milestones</a> on the GitHub project.
|
||||
</p>
|
||||
</section>
|
@ -0,0 +1,18 @@
|
||||
<section id="reporting-bugs">
|
||||
<h2 class="page-header">Reporting Bugs</h2>
|
||||
<p>
|
||||
Found a problem with Font Awesome? Feel free to submit an issue on the GitHub project. But please keep the following in mind:
|
||||
</p>
|
||||
<ol>
|
||||
<li>Please be nice. Font Awesome is a happy place.</li>
|
||||
<li>Please <a href="{{ site.fontawesome.github.url }}/search?type=Issues">search</a> to see if your bug was already reported.</li>
|
||||
<li>
|
||||
Before opening any issue, please read the generic <a href="https://github.com/necolas/issue-guidelines">issue
|
||||
guidelines</a>, by <a href="https://github.com/necolas/">Nicolas Gallagher</a>.
|
||||
</li>
|
||||
<li>
|
||||
After doing everything above, feel free to
|
||||
<a href="{{ site.fontawesome.github.url }}/issues/new">submit an issue</a>.
|
||||
</li>
|
||||
</ol>
|
||||
</section>
|
@ -0,0 +1,29 @@
|
||||
<section id="requesting-new-icons">
|
||||
<h2 class="page-header">Requesting New Icons</h2>
|
||||
<p>
|
||||
New icons mostly start as requests by the
|
||||
<a href="{{ site.fontawesome.github.url }}/issues">Font Awesome community on GitHub</a>. Want to request a new
|
||||
icon? Here are some things to keep in mind:
|
||||
</p>
|
||||
<ol>
|
||||
<li>Please be nice. Font Awesome is a happy place.</li>
|
||||
<li>Please <a href="{{ site.fontawesome.github.url }}/search?type=Issues">search</a> to see if your icon request already exists. If a request is found, please +1 that one.</li>
|
||||
<li>
|
||||
Please make requests for single icons, unless you are requesting a couple of strictly related icons (e.g., thumbs-up/thumbs-down).
|
||||
</li>
|
||||
<li>
|
||||
Please and thank you if you include the following:
|
||||
<ul>
|
||||
<li>
|
||||
Title your <a href="{{ site.fontawesome.github.url }}/issues/new?title=Icon%20Request:%20fa-">new issue</a>
|
||||
<code>Icon request: icon-name</code> (e.g., <code>Icon request: icon-car</code>).
|
||||
</li>
|
||||
<li>Include a few use cases for your requested icon. How do you plan on using it?</li>
|
||||
<li>Attach a single color image or two that represent the idea you're going for.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
Request concrete objects: it's harder to make an icon to represent happiness, it's easier to make a smiley face. <i class="fa fa-smile-o"></i>
|
||||
</li>
|
||||
</ol>
|
||||
</section>
|
@ -0,0 +1,13 @@
|
||||
<section id="submitting-pull-requests">
|
||||
<h2 class="page-header">Submitting Pull Requests</h2>
|
||||
Found a way to solve a bug in Font Awesome? Want to contribute new features? Here are a few things to remember:
|
||||
<ol>
|
||||
<li>Please do not submit new icons.</li>
|
||||
<li>Please submit all pull requests against *-wip branches.</li>
|
||||
<li>All pull requests submitted against master will be sumarily closed and this guide referenced.</li>
|
||||
<li>
|
||||
After doing everything above, feel free to
|
||||
<a href="{{ site.fontawesome.github.url }}/issues/new">submit a pull request</a>.
|
||||
</li>
|
||||
</ol>
|
||||
</section>
|
@ -0,0 +1,42 @@
|
||||
<section id="animated">
|
||||
<h2 class="page-header">
|
||||
Animated Icons
|
||||
<div class="pull-right text-default margin-top padding-top-sm hidden-xs">
|
||||
<a href="https://github.com/FortAwesome/Font-Awesome/blob/{{ site.fontawesome.doc_blob }}/less/animated.less" class="text-muted padding-right">View LESS</a>
|
||||
<a href="https://github.com/FortAwesome/Font-Awesome/blob/{{ site.fontawesome.doc_blob }}/scss/_animated.scss" class="text-muted">View SASS</a>
|
||||
</div>
|
||||
</h2>
|
||||
<div class="row">
|
||||
<div class="col-md-3 col-sm-4">
|
||||
<p>
|
||||
<i class="fa fa-spinner fa-spin fa-3x fa-fw margin-bottom"></i>
|
||||
<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw margin-bottom"></i>
|
||||
<i class="fa fa-refresh fa-spin fa-3x fa-fw margin-bottom"></i>
|
||||
<i class="fa fa-cog fa-spin fa-3x fa-fw margin-bottom"></i>
|
||||
<i class="fa fa-spinner fa-pulse fa-3x fa-fw margin-bottom"></i>
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-9 col-sm-8">
|
||||
<p>
|
||||
Use the <code>fa-spin</code> class to get any icon to rotate, and use <code>fa-pulse</code> to have it rotate
|
||||
with 8 steps. Works well with <code>fa-spinner</code>, <code>fa-refresh</code>, and <code>fa-cog</code>.
|
||||
</p>
|
||||
{% highlight html %}
|
||||
<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>
|
||||
{% endhighlight %}
|
||||
<p class="alert alert-success">
|
||||
<i class="fa fa-exclamation-triangle fa-lg"></i>
|
||||
Some browsers on some platforms have issues with animated icons resulting in a jittery wobbling effect. See
|
||||
<a href="https://github.com/FortAwesome/Font-Awesome/issues/671" class="alert-link" target="_blank">issue #671</a>
|
||||
for examples and possible workarounds.
|
||||
</p>
|
||||
<p class="alert alert-success">
|
||||
<i class="fa fa-info-circle fa-lg"></i> CSS3 animations aren't supported in IE8 - IE9.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
@ -0,0 +1,36 @@
|
||||
<section id="basic">
|
||||
<h2 class="page-header">
|
||||
Basic Icons
|
||||
<div class="pull-right text-default margin-top padding-top-sm hidden-xs">
|
||||
<a href="https://github.com/FortAwesome/Font-Awesome/blob/{{ site.fontawesome.doc_blob }}/less/core.less" class="text-muted padding-right">View LESS</a>
|
||||
<a href="https://github.com/FortAwesome/Font-Awesome/blob/{{ site.fontawesome.doc_blob }}/scss/_core.scss" class="text-muted">View SASS</a>
|
||||
</div>
|
||||
</h2>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-3 col-sm-4">
|
||||
<p>
|
||||
<i class="fa fa-camera-retro"></i> fa-camera-retro
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-9 col-sm-8">
|
||||
<p>
|
||||
You can place Font Awesome icons just about anywhere using the CSS Prefix <code>fa</code> and the icon's
|
||||
name. Font Awesome is designed to be used with inline elements (we like the <code><i></code> tag for
|
||||
brevity, but using a <code><span></code> is more semantically correct).
|
||||
</p>
|
||||
{% highlight html %}
|
||||
<i class="fa fa-camera-retro"></i> fa-camera-retro
|
||||
{% endhighlight %}
|
||||
<div class="alert alert-success">
|
||||
<ul class="fa-ul">
|
||||
<li>
|
||||
<i class="fa fa-info-circle fa-lg fa-li"></i>
|
||||
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.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
@ -0,0 +1,93 @@
|
||||
<section id="bootstrap">
|
||||
<h2 class="page-header">Bootstrap 3 Examples</h2>
|
||||
<div class="row">
|
||||
<div class="col-md-3 col-sm-4">
|
||||
<p>
|
||||
<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>
|
||||
</p>
|
||||
<p>
|
||||
<a class="btn btn-lg btn-success" href="#">
|
||||
<i class="fa fa-flag fa-2x pull-left"></i> Font Awesome<br>Version {{ site.fontawesome.version }}</a>
|
||||
</p>
|
||||
<div class="margin-bottom">
|
||||
<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>
|
||||
<div class="margin-bottom">
|
||||
<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>
|
||||
<div class="margin-bottom">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="col-md-9 col-sm-8">
|
||||
<p>
|
||||
Font Awesome works great with the full range of Bootstrap components.
|
||||
</p>
|
||||
{% highlight html %}
|
||||
<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 {{ site.fontawesome.version }}</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>
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
@ -0,0 +1,30 @@
|
||||
<section id="bordered-pulled">
|
||||
<h2 class="page-header">
|
||||
Bordered & Pulled Icons
|
||||
<div class="pull-right text-default margin-top padding-top-sm hidden-xs">
|
||||
<a href="https://github.com/FortAwesome/Font-Awesome/blob/{{ site.fontawesome.doc_blob }}/less/bordered-pulled.less" class="text-muted padding-right">View LESS</a>
|
||||
<a href="https://github.com/FortAwesome/Font-Awesome/blob/{{ site.fontawesome.doc_blob }}/scss/_bordered-pulled.scss" class="text-muted">View SASS</a>
|
||||
</div>
|
||||
</h2>
|
||||
<div class="row">
|
||||
<div class="col-md-3 col-sm-4">
|
||||
<p>
|
||||
<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.
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-9 col-sm-8">
|
||||
<p>
|
||||
Use <code>fa-border</code> and <code>fa-pull-right</code> or <code>fa-pull-left</code> for easy pull quotes or
|
||||
article icons.
|
||||
</p>
|
||||
{% highlight html %}
|
||||
<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.
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
@ -0,0 +1,16 @@
|
||||
<section id="custom">
|
||||
<h2 class="page-header">Custom CSS</h2>
|
||||
<div class="row">
|
||||
<div class="col-md-3 col-sm-4">
|
||||
<p>Anything you can do with CSS font styles, you can do with Font Awesome.</p>
|
||||
</div>
|
||||
<div class="col-md-9 col-sm-8">
|
||||
<p>Star Ratings (inspired by <a href="http://css-tricks.com/star-ratings/" target="_blank">CSS Tricks</a>)</p>
|
||||
<div class="well">
|
||||
<span class="rating">
|
||||
<span class="star"></span><span class="star"></span><span class="star"></span><span class="star"></span><span class="star"></span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
@ -0,0 +1,33 @@
|
||||
<section id="fixed-width">
|
||||
<h2 class="page-header">
|
||||
Fixed Width Icons
|
||||
<div class="pull-right text-default margin-top padding-top-sm hidden-xs">
|
||||
<a href="https://github.com/FortAwesome/Font-Awesome/blob/{{ site.fontawesome.doc_blob }}/less/fixed-width.less" class="text-muted padding-right">View LESS</a>
|
||||
<a href="https://github.com/FortAwesome/Font-Awesome/blob/{{ site.fontawesome.doc_blob }}/scss/_fixed-width.scss" class="text-muted">View SASS</a>
|
||||
</div>
|
||||
</h2>
|
||||
<div class="row">
|
||||
<div class="col-md-3 col-sm-4">
|
||||
<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>
|
||||
</div>
|
||||
<div class="col-md-9 col-sm-8">
|
||||
<p>
|
||||
Use <code>fa-fw</code> 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.
|
||||
</p>
|
||||
{% highlight html %}
|
||||
<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>
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
@ -0,0 +1,40 @@
|
||||
<section id="larger">
|
||||
<h2 class="page-header">
|
||||
Larger Icons
|
||||
<div class="pull-right text-default margin-top padding-top-sm hidden-xs">
|
||||
<a href="https://github.com/FortAwesome/Font-Awesome/blob/{{ site.fontawesome.doc_blob }}/less/larger.less" class="text-muted padding-right">View LESS</a>
|
||||
<a href="https://github.com/FortAwesome/Font-Awesome/blob/{{ site.fontawesome.doc_blob }}/scss/_larger.scss" class="text-muted">View SASS</a>
|
||||
</div>
|
||||
</h2>
|
||||
<div class="row">
|
||||
<div class="col-md-3 col-sm-4">
|
||||
<p><i class="fa fa-camera-retro fa-lg"></i> fa-lg</p>
|
||||
<p><i class="fa fa-camera-retro fa-2x"></i> fa-2x</p>
|
||||
<p><i class="fa fa-camera-retro fa-3x"></i> fa-3x</p>
|
||||
<p><i class="fa fa-camera-retro fa-4x"></i> fa-4x</p>
|
||||
<p><i class="fa fa-camera-retro fa-5x"></i> fa-5x</p>
|
||||
</div>
|
||||
<div class="col-md-9 col-sm-8">
|
||||
<p>
|
||||
To increase icon sizes relative to their container, use the <code>fa-lg</code> (33% increase), <code>fa-2x</code>,
|
||||
<code>fa-3x</code>, <code>fa-4x</code>, or <code>fa-5x</code> classes.
|
||||
</p>
|
||||
{% highlight html %}
|
||||
<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
|
||||
{% endhighlight %}
|
||||
<div class="alert alert-success">
|
||||
<ul class="fa-ul">
|
||||
<li>
|
||||
<i class="fa fa-exclamation-triangle fa-li fa-lg"></i>
|
||||
If your icons are getting chopped off on top and bottom, make sure you have
|
||||
sufficient line-height.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
@ -0,0 +1,30 @@
|
||||
<section id="list">
|
||||
<h2 class="page-header">
|
||||
List Icons
|
||||
<div class="pull-right text-default margin-top padding-top-sm hidden-xs">
|
||||
<a href="https://github.com/FortAwesome/Font-Awesome/blob/{{ site.fontawesome.doc_blob }}/less/list.less" class="text-muted padding-right">View LESS</a>
|
||||
<a href="https://github.com/FortAwesome/Font-Awesome/blob/{{ site.fontawesome.doc_blob }}/scss/_list.scss" class="text-muted">View SASS</a>
|
||||
</div>
|
||||
</h2>
|
||||
<div class="row">
|
||||
<div class="col-md-3 col-sm-4">
|
||||
<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>
|
||||
</div>
|
||||
<div class="col-md-9 col-sm-8">
|
||||
<p>Use <code>fa-ul</code> and <code>fa-li</code> to easily replace default bullets in unordered lists.</p>
|
||||
{% highlight html %}
|
||||
<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>
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
@ -0,0 +1,34 @@
|
||||
<section id="rotated-flipped">
|
||||
<h2 class="page-header">
|
||||
Rotated & Flipped
|
||||
<div class="pull-right text-default margin-top padding-top-sm hidden-xs">
|
||||
<a href="https://github.com/FortAwesome/Font-Awesome/blob/{{ site.fontawesome.doc_blob }}/less/rotated-flipped.less" class="text-muted padding-right">View LESS</a>
|
||||
<a href="https://github.com/FortAwesome/Font-Awesome/blob/{{ site.fontawesome.doc_blob }}/scss/_rotated-flipped.scss" class="text-muted">View SASS</a>
|
||||
</div>
|
||||
</h2>
|
||||
<div class="row">
|
||||
<div class="col-md-3 col-sm-4">
|
||||
<p style="font-size: 18px;">
|
||||
<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> fa-flip-vertical
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-9 col-sm-8">
|
||||
<p>
|
||||
To arbitrarily rotate and flip icons, use the <code>fa-rotate-*</code> and <code>fa-flip-*</code> classes.
|
||||
</p>
|
||||
{% highlight html %}
|
||||
<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> fa-flip-vertical
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
@ -0,0 +1,65 @@
|
||||
<section id="stacked">
|
||||
<h2 class="page-header">
|
||||
Stacked Icons
|
||||
<div class="pull-right text-default margin-top padding-top-sm hidden-xs">
|
||||
<a href="https://github.com/FortAwesome/Font-Awesome/blob/{{ site.fontawesome.doc_blob }}/less/stacked.less" class="text-muted padding-right">View LESS</a>
|
||||
<a href="https://github.com/FortAwesome/Font-Awesome/blob/{{ site.fontawesome.doc_blob }}/scss/_stacked.scss" class="text-muted">View SASS</a>
|
||||
</div>
|
||||
</h2>
|
||||
<div class="row">
|
||||
<div class="col-md-3 col-sm-4">
|
||||
<div class="margin-bottom">
|
||||
<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
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-9 col-sm-8">
|
||||
<p>
|
||||
To stack multiple icons, use the <code>fa-stack</code> class on the parent, the <code>fa-stack-1x</code>
|
||||
for the regularly sized icon, and <code>fa-stack-2x</code> for the larger icon. <code>fa-inverse</code>
|
||||
can be used as an alternative icon color. You can even throw <a href="#larger">larger icon</a> classes on the parent
|
||||
to get further control of sizing.
|
||||
</p>
|
||||
{% highlight html %}
|
||||
<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
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
@ -0,0 +1,34 @@
|
||||
<footer id="footer" class="footer hidden-print">
|
||||
<div class="container text-center">
|
||||
<div id="bsap_1298241" class="bsarocks bsap_b1146e3f9fa32a794fc6d2c7be47ece8">
|
||||
<a href="http://www.wpbeginner.com/?utm_source=fontawesome_footer&utm_medium=banner&utm_campaign=fontawesome" title="Beginner's Guide to WordPress" target="_blank" rel="nofollow"
|
||||
onClick="_gaq.push(['_trackEvent', 'Outbound Link', 'wpbeginner.com']);">
|
||||
<img src="{{ page.relative_path }}assets/img/logo-wpbeginner.png" width="220" height="65" alt="">
|
||||
</a>
|
||||
<a href="https://themeisle.com/?utm_source=fontawesome_footer&utm_medium=banner&utm_campaign=fontawesome" title="Beginner's Guide to WordPress" target="_blank" rel="nofollow"
|
||||
onClick="_gaq.push(['_trackEvent', 'Outbound Link', 'themeisle.com']);">
|
||||
<img src="{{ page.relative_path }}assets/img/logo-themeisle.png" width="220" height="65" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<i class="fa fa-flag"></i> Font Awesome {{ site.fontawesome.version }}
|
||||
<span class="hide-xs">·</span><br class="hide-sm hide-md hide-lg">
|
||||
Created by <a href="https://twitter.com/{{ site.fontawesome.author.twitter }}">Dave Gandy</a>
|
||||
</div>
|
||||
<div>
|
||||
Font Awesome licensed under <a href="{{ site.fontawesome.license.font.url }}">{{ site.fontawesome.license.font.version }}</a>
|
||||
<span class="hide-xs">·</span><br class="hide-sm hide-md hide-lg">
|
||||
Code licensed under <a href="{{ site.fontawesome.license.code.url }}">{{ site.fontawesome.license.code.version }}</a>
|
||||
<span class="hide-xs hide-sm">·</span><br class="hide-md hide-lg">
|
||||
Documentation licensed under <a href="{{ site.fontawesome.license.documentation.url }}">{{ site.fontawesome.license.documentation.version }}</a>
|
||||
</div>
|
||||
<div>
|
||||
Thanks to <a href="http://tracking.maxcdn.com/c/148092/3982/378/"><i class="fa fa-maxcdn"></i> MaxCDN</a> for providing the excellent <a href="http://www.bootstrapcdn.com/#fontawesome_tab">BootstrapCDN for Font Awesome</a>
|
||||
</div>
|
||||
<div class="project">
|
||||
<a href="{{ site.fontawesome.github.url }}">GitHub Project</a> ·
|
||||
<a href="{{ site.fontawesome.github.url }}/issues">Issues</a> ·
|
||||
<a href="{{ page.relative_path }}3.2.1">Old 3.2.1 Docs</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
@ -0,0 +1,19 @@
|
||||
<section id="brand">
|
||||
<h2 class="page-header">Brand Icons</h2>
|
||||
|
||||
<div class="alert alert-warning">
|
||||
{% include brand-adblock-warning.html %}
|
||||
</div>
|
||||
|
||||
<div class="row fontawesome-icon-list margin-bottom-lg">
|
||||
{% assign icons_brand = icons | expand_aliases | category:"Brand Icons" | sort_by:'class' %}
|
||||
|
||||
{% for icon in icons_brand %}
|
||||
<div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div class="alert alert-success">
|
||||
{% include brand-license.html %}
|
||||
</div>
|
||||
</section>
|
@ -0,0 +1,12 @@
|
||||
<section id="chart">
|
||||
<h2 class="page-header">Chart Icons</h2>
|
||||
|
||||
<div class="row fontawesome-icon-list">
|
||||
{% assign icons_chart = icons | expand_aliases | category:"Chart Icons" | sort_by:'class' %}
|
||||
|
||||
{% for icon in icons_chart %}
|
||||
<div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
</section>
|
@ -0,0 +1,12 @@
|
||||
<section id="currency">
|
||||
<h2 class="page-header">Currency Icons</h2>
|
||||
|
||||
<div class="row fontawesome-icon-list">
|
||||
{% assign icons_currency = icons | expand_aliases | category:"Currency Icons" | sort_by:'class' %}
|
||||
|
||||
{% for icon in icons_currency %}
|
||||
<div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
</section>
|
@ -0,0 +1,12 @@
|
||||
<section id="directional">
|
||||
<h2 class="page-header">Directional Icons</h2>
|
||||
|
||||
<div class="row fontawesome-icon-list">
|
||||
{% assign icons_directional = icons | expand_aliases | category:"Directional Icons" | sort_by:'class' %}
|
||||
|
||||
{% for icon in icons_directional %}
|
||||
<div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
</section>
|
@ -0,0 +1,12 @@
|
||||
<section id="file-type">
|
||||
<h2 class="page-header">File Type Icons</h2>
|
||||
|
||||
<div class="row fontawesome-icon-list">
|
||||
{% assign icons_file_type = icons | expand_aliases | category:"File Type Icons" | sort_by:'class' %}
|
||||
|
||||
{% for icon in icons_file_type %}
|
||||
<div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
</section>
|
@ -0,0 +1,11 @@
|
||||
<section id="form-control">
|
||||
<h2 class="page-header">Form Control Icons</h2>
|
||||
|
||||
<div class="row fontawesome-icon-list">
|
||||
{% assign icons_form_control = icons | expand_aliases | category:"Form Control Icons" | sort_by:'class' %}
|
||||
|
||||
{% for icon in icons_form_control %}
|
||||
<div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</section>
|
@ -0,0 +1,12 @@
|
||||
<section id="gender">
|
||||
<h2 class="page-header">Gender Icons</h2>
|
||||
|
||||
<div class="row fontawesome-icon-list">
|
||||
{% assign icons_gender = icons | expand_aliases | category:"Gender Icons" | sort_by:'class' %}
|
||||
|
||||
{% for icon in icons_gender %}
|
||||
<div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
</section>
|
@ -0,0 +1,12 @@
|
||||
<section id="hand">
|
||||
<h2 class="page-header">Hand Icons</h2>
|
||||
|
||||
<div class="row fontawesome-icon-list">
|
||||
{% assign icons_hand = icons | expand_aliases | category:"Hand Icons" | sort_by:'class' %}
|
||||
|
||||
{% for icon in icons_hand %}
|
||||
<div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
</section>
|
@ -0,0 +1,12 @@
|
||||
<section id="medical">
|
||||
<h2 class="page-header">Medical Icons</h2>
|
||||
|
||||
<div class="row fontawesome-icon-list">
|
||||
{% assign icons_medical = icons | expand_aliases | category:"Medical Icons" | sort_by:'class' %}
|
||||
|
||||
{% for icon in icons_medical %}
|
||||
<div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
</section>
|
@ -0,0 +1,18 @@
|
||||
<section id="new">
|
||||
<h2 class="page-header">{{ icons | version:site.fontawesome.minor_version | size }} New Icons in {{ site.fontawesome.minor_version }}</h2>
|
||||
{% if page.navbar_active != "icons" %}
|
||||
<div class="margin-botom-large">
|
||||
You asked, Font Awesome delivers with {{ icons | version:site.fontawesome.minor_version | size }} shiny new icons in version {{ site.fontawesome.minor_version }}.
|
||||
Want to request new icons? <a href="{{ page.relative_path }}community/#requesting-new-icons">Here's how</a>.
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="row fontawesome-icon-list">
|
||||
{% assign icons_new = icons | expand_aliases | version:site.fontawesome.minor_version | sort_by:'class' %}
|
||||
|
||||
{% for icon in icons_new %}
|
||||
<div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
</section>
|
@ -0,0 +1,12 @@
|
||||
<section id="payment">
|
||||
<h2 class="page-header">Payment Icons</h2>
|
||||
|
||||
<div class="row fontawesome-icon-list">
|
||||
{% assign icons_payment = icons | expand_aliases | category:"Payment Icons" | sort_by:'class' %}
|
||||
|
||||
{% for icon in icons_payment %}
|
||||
<div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
</section>
|
@ -0,0 +1,21 @@
|
||||
<section id="spinner">
|
||||
<h2 class="page-header">Spinner Icons</h2>
|
||||
|
||||
<div class="alert alert-success">
|
||||
<ul class="fa-ul">
|
||||
<li>
|
||||
<i class="fa fa-info-circle fa-lg fa-li"></i>
|
||||
These icons work great with the <code>fa-spin</code> class. Check out the
|
||||
<a href="{{ page.relative_path }}examples/#animated" class="alert-link">spinning icons example</a>.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="row fontawesome-icon-list">
|
||||
{% assign icons_spinner = icons | expand_aliases | category:"Spinner Icons" | sort_by:'class' %}
|
||||
|
||||
{% for icon in icons_spinner %}
|
||||
<div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</section>
|
@ -0,0 +1,12 @@
|
||||
<section id="text-editor">
|
||||
<h2 class="page-header">Text Editor Icons</h2>
|
||||
|
||||
<div class="row fontawesome-icon-list">
|
||||
{% assign icons_text_editor = icons | expand_aliases | category:"Text Editor Icons" | sort_by:'class' %}
|
||||
|
||||
{% for icon in icons_text_editor %}
|
||||
<div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
</section>
|
@ -0,0 +1,12 @@
|
||||
<section id="transportation">
|
||||
<h2 class="page-header">Transportation Icons</h2>
|
||||
|
||||
<div class="row fontawesome-icon-list">
|
||||
{% assign icons_transportation = icons | expand_aliases | category:"Transportation Icons" | sort_by:'class' %}
|
||||
|
||||
{% for icon in icons_transportation %}
|
||||
<div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
</section>
|
@ -0,0 +1,12 @@
|
||||
<section id="video-player">
|
||||
<h2 class="page-header">Video Player Icons</h2>
|
||||
|
||||
<div class="row fontawesome-icon-list">
|
||||
{% assign icons_video_player = icons | expand_aliases | category:"Video Player Icons" | sort_by:'class' %}
|
||||
|
||||
{% for icon in icons_video_player %}
|
||||
<div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
</section>
|
@ -0,0 +1,12 @@
|
||||
<section id="web-application">
|
||||
<h2 class="page-header">Web Application Icons</h2>
|
||||
|
||||
<div class="row fontawesome-icon-list">
|
||||
{% assign icons_web_application = icons | expand_aliases | category:"Web Application Icons" | sort_by:'class' %}
|
||||
|
||||
{% for icon in icons_web_application %}
|
||||
<div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
</section>
|
@ -0,0 +1,53 @@
|
||||
<div class="jumbotron jumbotron-carousel hidden-print">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-8 col-sm-8 text-center">
|
||||
<h1>Font Awesome</h1>
|
||||
<p>The iconic font and CSS toolkit</p>
|
||||
<div class="actions">
|
||||
<a class="btn btn-default btn-lg" href="#modal-download" data-toggle="modal"
|
||||
onClick="_gaq.push(['_trackEvent', 'Launch Modal', 'Launch Download Modal']);">
|
||||
<i class="fa fa-download fa-lg"></i>
|
||||
Download
|
||||
</a>
|
||||
</div>
|
||||
<div class="shameless-self-promotion">
|
||||
Version {{ site.fontawesome.version }} ·
|
||||
<a href="{{ site.fontawesome.github.url }}"
|
||||
onClick="_gaq.push(['_trackEvent', 'Outbound Link', 'View Project on GitHub']);">
|
||||
GitHub Project</a> ·
|
||||
<a href="{{ page.relative_path }}3.2.1">Old 3.2.1 Docs</a> ·
|
||||
Created by <a href="http://twitter.com/{{ site.fontawesome.author.twitter }}">Dave Gandy</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 col-sm-4">
|
||||
<div id="icon-carousel" class="carousel slide">
|
||||
<!-- Carousel items -->
|
||||
<div class="carousel-inner">
|
||||
<div class="active item"><div><i class="fa fa-flag"></i></div></div>
|
||||
<div class="item"><div><i class="fa fa-fort-awesome"></i></div></div>
|
||||
<div class="item"><div><i class="fa fa-sticky-note"></i></div></div>
|
||||
<div class="item"><div><i class="fa fa-commenting"></i></div></div>
|
||||
<div class="item"><div><i class="fa fa-map-signs"></i></div></div>
|
||||
<div class="item"><div><i class="fa fa-envelope"></i></div></div>
|
||||
<div class="item"><div><i class="fa fa-send-o"></i></div></div>
|
||||
<div class="item"><div><i class="fa fa-book"></i></div></div>
|
||||
<div class="item"><div><i class="fa fa-fighter-jet"></i></div></div>
|
||||
<div class="item"><div><i class="fa fa-beer"></i></div></div>
|
||||
<div class="item"><div><i class="fa fa-heart-o"></i></div></div>
|
||||
<div class="item"><div><i class="fa fa-thumbs-o-up"></i></div></div>
|
||||
<div class="item"><div><i class="fa fa-pied-piper-alt"></i></div></div>
|
||||
</div>
|
||||
<!-- Carousel nav -->
|
||||
<a class="carousel-control left" href="#icon-carousel" data-slide="prev"
|
||||
onClick="_gaq.push(['_trackEvent', 'iconCarousel', 'Prev']);">
|
||||
<i class="fa fa-arrow-circle-left"></i></a>
|
||||
<a class="carousel-control right" href="#icon-carousel" data-slide="next"
|
||||
onClick="_gaq.push(['_trackEvent', 'iconCarousel', 'Next']);">
|
||||
<i class="fa fa-arrow-circle-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
@ -0,0 +1,6 @@
|
||||
<div class="jumbotron jumbotron-ad hidden-print">
|
||||
<div class="container">
|
||||
<h1>{{ jumbotron_h1 }}</h1>
|
||||
<p>{{ jumbotron_p }}</p>
|
||||
</div>
|
||||
</div>
|
@ -0,0 +1,34 @@
|
||||
<div class="modal fade" id="modal-download" tabindex="-1" role="dialog" aria-labelledby="modal-download-label">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fa fa-times"></i></button>
|
||||
<h2 class="modal-title" id="modal-download-label">Help Us Out!</h2>
|
||||
</div>
|
||||
<div class="modal-body text-lg">
|
||||
<p class="margin-bottom-lg">
|
||||
I hope you love Font Awesome. If you've found it useful,
|
||||
<a class="strong" href="https://fonticons.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=download_modal&utm_campaign=promo_4.4_update" target="_blank">
|
||||
please do me a favor and check out my latest project, Fonticons</a>. It makes it easy to put the perfect
|
||||
icons on your website. Choose from our awesome, comprehensive icon sets or copy and paste your own.
|
||||
</p>
|
||||
|
||||
<p class="margin-bottom-lg">
|
||||
Please. Check it out.
|
||||
</p>
|
||||
|
||||
<p>—Dave Gandy</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a class="btn btn-default btn-lg block-xs" href="{{ page.relative_path }}assets/font-awesome-{{ site.fontawesome.version }}.zip"
|
||||
onClick="_gaq.push(['_trackEvent', 'Outbound Modal Link', 'Download on GitHub']);">
|
||||
<i class="fa fa-download fa-lg"></i>
|
||||
Download
|
||||
</a>
|
||||
<a class="btn btn-success btn-lg block-xs" href="https://fonticons.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=download_modal&utm_campaign=promo_4.4_update" target="_blank">
|
||||
Check out Fonticons <i class="fa fa-external-link fa-lg"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
@ -0,0 +1,89 @@
|
||||
<div class="collapse hidden-print" id="banner">
|
||||
<div class="container">
|
||||
<div class="message-container">
|
||||
<div class="tagline">
|
||||
<span id="rotating-message"></span>
|
||||
</div>
|
||||
<div class="action">
|
||||
<a id="rotating-url" class="btn btn-primary btn-block" href=""></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="navbar navbar-inverse navbar-static-top hidden-print">
|
||||
<div class="container">
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<i class="fa fa-bars fa-lg"></i>
|
||||
</button>
|
||||
<a class="navbar-brand" href="{{ page.relative_path }}"><i class="fas fas-logo"></i></a>
|
||||
</div>
|
||||
|
||||
<div class="navbar-collapse collapse">
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="hidden-sm {% if page.navbar_active == "home" %} active{% endif %}"><a href="{{ page.relative_path }}">Home</a></li>
|
||||
<li class="hidden-sm{% if page.navbar_active == "whats-new" %} active{% endif %}">
|
||||
<a href="{{ page.relative_path }}whats-new/">What's New</a>
|
||||
</li>
|
||||
<li class="hidden-xs hidden-md hidden-lg{% if page.navbar_active == "whats-new" %} active{% endif %}">
|
||||
<a href="{{ page.relative_path }}whats-new/">New</a>
|
||||
</li>
|
||||
<li{% if page.navbar_active == "get-started" %} class="active"{% endif %}><a href="{{ page.relative_path }}get-started/">Get Started</a></li>
|
||||
<li class="dropdown-split-left{% if page.navbar_active == "icons" %} active{% endif %}"><a href="{{ page.relative_path }}icons/">Icons</a></li>
|
||||
<li class="dropdown dropdown-split-right hidden-xs{% if page.navbar_active == "icons" %} active{% endif %}">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
|
||||
<i class="fa fa-caret-down"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu pull-right">
|
||||
<li><a href="{{ page.relative_path }}icons/"><i class="fa fa-flag fa-fw"></i> All Icons</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="{{ page.relative_path }}icons/#new"><i class="fa fa-fort-awesome fa-fw"></i> New Icons in {{ site.fontawesome.minor_version }}</a></li>
|
||||
<li><a href="{{ page.relative_path }}icons/#web-application"><i class="fa fa-camera-retro fa-fw"></i> Web Application Icons</a></li>
|
||||
<li><a href="{{ page.relative_path }}icons/#hand"><i class="fa fa-hand-spock-o fa-fw"></i> Hand Icons</a></li>
|
||||
<li><a href="{{ page.relative_path }}icons/#transportation"><i class="fa fa-ship fa-fw"></i> Transportation Icons</a></li>
|
||||
<li><a href="{{ page.relative_path }}icons/#gender"><i class="fa fa-venus fa-fw"></i> Gender Icons</a></li>
|
||||
<li><a href="{{ page.relative_path }}icons/#file-type"><i class="fa fa-file-image-o fa-fw"></i> File Type Icons</a></li>
|
||||
<li><a href="{{ page.relative_path }}icons/#spinner"><i class="fa fa-spinner fa-fw"></i> Spinner Icons</a></li>
|
||||
<li><a href="{{ page.relative_path }}icons/#form-control"><i class="fa fa-check-square fa-fw"></i> Form Control Icons</a></li>
|
||||
<li><a href="{{ page.relative_path }}icons/#payment"><i class="fa fa-credit-card fa-fw"></i> Payment Icons</a></li>
|
||||
<li><a href="{{ page.relative_path }}icons/#chart"><i class="fa fa-pie-chart fa-fw"></i> Chart Icons</a></li>
|
||||
<li><a href="{{ page.relative_path }}icons/#currency"><i class="fa fa-won fa-fw"></i> Currency Icons</a></li>
|
||||
<li><a href="{{ page.relative_path }}icons/#text-editor"><i class="fa fa-file-text-o fa-fw"></i> Text Editor Icons</a></li>
|
||||
<li><a href="{{ page.relative_path }}icons/#directional"><i class="fa fa-arrow-right fa-fw"></i> Directional Icons</a></li>
|
||||
<li><a href="{{ page.relative_path }}icons/#video-player"><i class="fa fa-play-circle fa-fw"></i> Video Player Icons</a></li>
|
||||
<li><a href="{{ page.relative_path }}icons/#brand"><i class="fa fa-github fa-fw"></i> Brand Icons</a></li>
|
||||
<li><a href="{{ page.relative_path }}icons/#medical"><i class="fa fa-medkit fa-fw"></i> Medical Icons</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="dropdown-split-left{% if page.navbar_active == "examples" %} active{% endif %}"><a href="{{ page.relative_path }}examples/">Examples</a></li>
|
||||
<li class="dropdown dropdown-split-right hidden-xs{% if page.navbar_active == "examples" %} active{% endif %}">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
|
||||
<i class="fa fa-caret-down"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu pull-right">
|
||||
<li><a href="{{ page.relative_path }}examples/">Examples</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="{{ page.relative_path }}examples/#basic">Basic Icons</a></li>
|
||||
<li><a href="{{ page.relative_path }}examples/#larger">Larger Icons</a></li>
|
||||
<li><a href="{{ page.relative_path }}examples/#fixed-width">Fixed Width Icons</a></li>
|
||||
<li><a href="{{ page.relative_path }}examples/#list">List Icons</a></li>
|
||||
<li><a href="{{ page.relative_path }}examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
|
||||
<li><a href="{{ page.relative_path }}examples/#animated">Animated Icons</a></li>
|
||||
<li><a href="{{ page.relative_path }}examples/#rotated-flipped">Rotated & Flipped Icons</a></li>
|
||||
<li><a href="{{ page.relative_path }}examples/#stacked">Stacked Icons</a></li>
|
||||
<li><a href="{{ page.relative_path }}examples/#bootstrap">Bootstrap 3 Examples</a></li>
|
||||
<li><a href="{{ page.relative_path }}examples/#custom">Custom CSS</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li{% if page.navbar_active == "community" %} class="active"{% endif %}><a href="{{ page.relative_path }}community/">Community</a></li>
|
||||
<li{% if page.navbar_active == "license" %} class="active"{% endif %}><a href="{{ page.relative_path }}license/">License</a></li>
|
||||
</ul>
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
<li><a href="{{ site.fontawesome.blog_url }}">Blog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
@ -0,0 +1,29 @@
|
||||
|
||||
<section id="whats-new" class="feature-list">
|
||||
<div class="row">
|
||||
<div class="col-md-4 col-sm-6">
|
||||
<h4><i class="fa fa-file-text-o"></i> Completely Rewritten</h4>
|
||||
Everything re-written from the ground up for speed and simplicity.
|
||||
</div>
|
||||
<div class="col-md-4 col-sm-6">
|
||||
<h4><i class="fa fa-fighter-jet"></i> CSS Best Practices</h4>
|
||||
New icon base class allows simpler CSS, faster rendering, and easier control.
|
||||
</div>
|
||||
<div class="col-md-4 col-sm-6">
|
||||
<h4><i class="fa fa-terminal"></i> New Icon Names</h4>
|
||||
Icons have been renamed to improve consistency and predictability.
|
||||
</div>
|
||||
<div class="col-md-4 col-sm-6">
|
||||
<h4><i class="fa fa-thumbs-o-up"></i> Bootstrap 3</h4>
|
||||
Font Awesome {{ site.fontawesome.minor_version }} is fully tested and compatible with Bootstrap 3.
|
||||
</div>
|
||||
<div class="col-md-4 col-sm-6">
|
||||
<h4><i class="fa fa-code"></i> Better Compatibility</h4>
|
||||
Font Awesome is now more compatible with all web frameworks, including Foundation.
|
||||
</div>
|
||||
<div class="col-md-4 col-sm-6">
|
||||
<h4><i class="fa fa-rub"></i> {{ icons | version:site.fontawesome.minor_version | size }} New Icons in {{ site.fontawesome.minor_version }}</h4>
|
||||
Requested by the active community on the <a href="{{ site.fontawesome.github.url }}">Font Awesome GitHub project</a>.
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
@ -0,0 +1,157 @@
|
||||
<section id="new-naming">
|
||||
<h2 class="page-header">New Naming Conventions in {{ site.fontawesome.minor_version }}</h2>
|
||||
<p class="lead text-center alert alert-success">fa-[name]-[shape]-[o]-[direction]</p>
|
||||
<p>
|
||||
A desire for better icon naming <strong>consistency</strong> and <strong>predictability</strong> are at the heart
|
||||
of the changes in naming conventions. Once you know the name of the base icon shape, you should be able to predict
|
||||
the names of variants.
|
||||
</p>
|
||||
<div class="row">
|
||||
<div class="col-lg-3 col-md-4 col-sm-6">
|
||||
<h4 class="margin-bottom-sm">fa-*</h4>
|
||||
<p class="margin-bottom-sm">Solid icons as the base variant</p>
|
||||
<ul class="fa-ul padding-left-sm">
|
||||
<li>
|
||||
<i class="fa fa-bookmark fa-li"></i>
|
||||
fa-bookmark
|
||||
</li>
|
||||
<li>
|
||||
<i class="fa fa-comment fa-li"></i>
|
||||
fa-comment
|
||||
</li>
|
||||
<li>
|
||||
<i class="fa fa-folder fa-li"></i>
|
||||
fa-folder
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-4 col-sm-6">
|
||||
<h4 class="margin-bottom-sm">*-o</h4>
|
||||
<p class="margin-bottom-sm">Outlined version of previous modifier</p>
|
||||
<ul class="fa-ul padding-left-sm">
|
||||
<li>
|
||||
<i class="fa fa-bookmark-o fa-li"></i>
|
||||
fa-bookmark-o
|
||||
</li>
|
||||
<li>
|
||||
<i class="fa fa-comment-o fa-li"></i>
|
||||
fa-comment-o
|
||||
</li>
|
||||
<li>
|
||||
<i class="fa fa-folder-o fa-li"></i>
|
||||
fa-folder-o
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-4 col-sm-6">
|
||||
<h4 class="margin-bottom-sm">*-circle</h4>
|
||||
<p class="margin-bottom-sm">Circle under previous modifier</p>
|
||||
<ul class="fa-ul padding-left-sm">
|
||||
<li>
|
||||
<i class="fa fa-check-circle fa-li"></i>
|
||||
fa-check-circle
|
||||
</li>
|
||||
<li>
|
||||
<i class="fa fa-exclamation-circle fa-li"></i>
|
||||
fa-exclamation-circle
|
||||
</li>
|
||||
<li>
|
||||
<i class="fa fa-plus-circle fa-li"></i>
|
||||
fa-plus-circle
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-4 col-sm-6">
|
||||
<h4 class="margin-bottom-sm">*-square</h4>
|
||||
<p class="margin-bottom-sm">Square under previous modifier</p>
|
||||
<ul class="fa-ul padding-left-sm">
|
||||
<li>
|
||||
<i class="fa fa-check-square fa-li"></i>
|
||||
fa-check-square
|
||||
</li>
|
||||
<li>
|
||||
<i class="fa fa-twitter-square fa-li"></i>
|
||||
fa-twitter-square
|
||||
</li>
|
||||
<li>
|
||||
<i class="fa fa-plus-square fa-li"></i>
|
||||
fa-plus-square
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-4 col-sm-6">
|
||||
<h4 class="margin-bottom-sm">*-right, *-up, etc.</h4>
|
||||
<p class="margin-bottom-sm">Directional modifier always at the end</p>
|
||||
<ul class="fa-ul padding-left-sm">
|
||||
<li>
|
||||
<i class="fa fa-arrow-right fa-li"></i>
|
||||
fa-arrow-right
|
||||
</li>
|
||||
<li>
|
||||
<i class="fa fa-arrow-circle-right fa-li"></i>
|
||||
fa-arrow-circle-right
|
||||
</li>
|
||||
<li>
|
||||
<i class="fa fa-angle-double-right fa-li"></i>
|
||||
fa-angle-double-right
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-4 col-sm-6">
|
||||
<h4 class="margin-bottom-sm">*-alt</h4>
|
||||
<p class="margin-bottom-sm">Alternative to the original</p>
|
||||
<ul class="fa-ul padding-left-sm">
|
||||
<li>
|
||||
<i class="fa fa-unlock-alt fa-li"></i>
|
||||
fa-unlock-alt
|
||||
</li>
|
||||
<li>
|
||||
<i class="fa fa-list-alt fa-li"></i>
|
||||
fa-list-alt
|
||||
</li>
|
||||
<li>
|
||||
<i class="fa fa-github-alt fa-li"></i>
|
||||
fa-github-alt
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-4 col-sm-6">
|
||||
<h4 class="margin-bottom-sm">*-h, *-v</h4>
|
||||
<p class="margin-bottom-sm">Horizontal & vertical modifiers</p>
|
||||
<ul class="fa-ul padding-left-sm">
|
||||
<li>
|
||||
<i class="fa fa-arrows-v fa-li"></i>
|
||||
fa-arrows-v
|
||||
</li>
|
||||
<li>
|
||||
<i class="fa fa-arrows-h fa-li"></i>
|
||||
fa-arrows-h
|
||||
</li>
|
||||
<li>
|
||||
<i class="fa fa-ellipsis-v fa-li"></i>
|
||||
fa-ellipsis-v
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-4 col-sm-6">
|
||||
<h4 class="margin-bottom-sm">Combine 'em up...</h4>
|
||||
<p class="margin-bottom-sm">Consistent when strung together</p>
|
||||
<ul class="fa-ul padding-left-sm">
|
||||
<li>
|
||||
<i class="fa fa-arrow-circle-o-right fa-li"></i>
|
||||
fa-arrow-circle-o-right
|
||||
</li>
|
||||
<li>
|
||||
<i class="fa fa-caret-square-o-right fa-li"></i>
|
||||
fa-caret-square-o-right
|
||||
</li>
|
||||
<li>
|
||||
<i class="fa fa-hand-o-right fa-li"></i>
|
||||
fa-hand-o-right
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
@ -0,0 +1,10 @@
|
||||
<section id="new-upgrading">
|
||||
<h2 class="page-header">Upgrading from 3.2.1?</h2>
|
||||
<p>
|
||||
For complete documentation of the syntax changes in {{ site.fontawesome.minor_version }}, check out the
|
||||
<a href="{{ page.relative_path }}examples">examples</a>. For the changes to icon names,
|
||||
<a href="https://twitter.com/gtagliala">@gtagliala</a> has put together a
|
||||
<a href="{{ site.fontawesome.github.url }}/wiki/Upgrading-from-3.2.1-to-4">great wiki page</a> that
|
||||
documents all the changes.
|
||||
</p>
|
||||
</section>
|
@ -0,0 +1,6 @@
|
||||
<section class="hidden-print">
|
||||
<div class="stripe-ad">
|
||||
{% include ads/fusion.html %}
|
||||
{{ stripe_ad_content }}
|
||||
</div>
|
||||
</section>
|
@ -0,0 +1,35 @@
|
||||
<div id="social-buttons" class="hidden-print">
|
||||
<div class="container">
|
||||
<form id="newsletter" method="post" action="https://formkeep.com/f/ba101f5b69f0">
|
||||
<div class="row">
|
||||
<div class="col-md-4 col-md-offset-2 col-sm-6">
|
||||
<div class="form-group margin-bottom">
|
||||
<input name="email" type="email" class="form-control" id="email" placeholder="Enter your email address…" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 col-sm-6">
|
||||
<button type="submit" class="btn btn-success btn-block margin-bottom-lg"
|
||||
data-toggle="popover" data-trigger="hover" data-placement="top" title="Stay up to date with the Awesome"
|
||||
data-content="We'll send you updates on new Font Awesome releases, icons, and other stuff that we're working on. We won't spam you. Scout's honor.">
|
||||
Subscribe to Font Awesome Updates <i class="fa fa-envelope"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<ul class="list-inline">
|
||||
<li>
|
||||
<iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=FortAwesome&repo=Font-Awesome&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
|
||||
</li>
|
||||
<li>
|
||||
<iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=FortAwesome&repo=Font-Awesome&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="102px" height="20px"></iframe>
|
||||
</li>
|
||||
<li class="follow-btn">
|
||||
<a href="https://twitter.com/{{ site.fontawesome.twitter }}" class="twitter-follow-button" data-link-color="#0069D6" data-show-count="true">Follow @{{ site.fontawesome.twitter }}</a>
|
||||
</li>
|
||||
<li class="tweet-btn hidden-phone">
|
||||
<a href="https://twitter.com/share" class="twitter-share-button" data-url="{{ site.fontawesome.url }}" data-text="Font Awesome, the iconic font and CSS framework" data-counturl="{{ site.fontawesome.legacy_url }}" data-count="horizontal" data-via="{{ site.fontawesome.twitter }}" data-related="{{ site.fontawesome.author.twitter }}:Creator of Font Awesome">Tweet</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
@ -0,0 +1,22 @@
|
||||
<section id="tell-me-thanks">
|
||||
<h2 class="page-header">Tell Me Thanks</h2>
|
||||
<p class="lead">
|
||||
Hopefully you think Font Awesome <em>is</em> awesome. I've put hundreds of hours into the project to give back to the
|
||||
open source community. If you'd like, here are a couple of ways you can tell me thanks for all my hard work.
|
||||
</p>
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-sm-6">
|
||||
<h3><a href="https://www.gittip.com/davegandy/"><i class="fa fa-gittip padding-right-sm"></i>Tip me on Gittip</a></h3>
|
||||
<p>
|
||||
Gittip is a great way to let developers know you appreciate their work.
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-6 col-sm-6">
|
||||
<h3><a href="http://amzn.com/w/G64X58AY416W" target="_blank">My Amazon Wish List</a></h3>
|
||||
<p>
|
||||
Or pick something straight
|
||||
from <a href="http://amzn.com/w/G64X58AY416W" target="_blank">my wish list</a>. Gift cards are great.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
@ -0,0 +1,6 @@
|
||||
<a href="#"><i class="fa fa-flag"></i> normal</a><br>
|
||||
<a href="#"><i class="fa fa-flag fa-rotate-90"></i> fa-rotate-90</a><br>
|
||||
<a href="#"><i class="fa fa-flag fa-rotate-180"></i> fa-rotate-180</a><br>
|
||||
<a href="#"><i class="fa fa-flag fa-rotate-270"></i> fa-rotate-270</a><br>
|
||||
<a href="#"><i class="fa fa-flag fa-flip-horizontal"></i> fa-flip-horizontal</a><br>
|
||||
<a href="#"><i class="fa fa-flag fa-flip-vertical"></i> fa-flip-vertical</a>
|
@ -0,0 +1,6 @@
|
||||
<a class="btn btn-default" href="#"><i class="fa fa-flag"></i> normal</a><br>
|
||||
<a class="btn btn-default" href="#"><i class="fa fa-flag fa-rotate-90"></i> fa-rotate-90</a><br>
|
||||
<a class="btn btn-default" href="#"><i class="fa fa-flag fa-rotate-180"></i> fa-rotate-180</a><br>
|
||||
<a class="btn btn-default" href="#"><i class="fa fa-flag fa-rotate-270"></i> fa-rotate-270</a><br>
|
||||
<a class="btn btn-default" href="#"><i class="fa fa-flag fa-flip-horizontal"></i> fa-flip-horizontal</a><br>
|
||||
<a class="btn btn-default" href="#"><i class="fa fa-flag fa-flip-vertical"></i> fa-flip-vertical</a>
|
@ -0,0 +1,6 @@
|
||||
<i class="fa fa-flag"></i> normal<br>
|
||||
<i class="fa fa-flag fa-rotate-90"></i> fa-rotate-90<br>
|
||||
<i class="fa fa-flag fa-rotate-180"></i> fa-rotate-180<br>
|
||||
<i class="fa fa-flag fa-rotate-270"></i> fa-rotate-270<br>
|
||||
<i class="fa fa-flag fa-flip-horizontal"></i> fa-flip-horizontal<br>
|
||||
<i class="fa fa-flag fa-flip-vertical"></i> fa-flip-vertical
|
@ -0,0 +1,69 @@
|
||||
<p>
|
||||
<a href="#">
|
||||
<span class="fa-stack">
|
||||
<i class="fa fa-square fa-stack-2x"></i>
|
||||
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
|
||||
</span>
|
||||
Twitter Icon
|
||||
</a>
|
||||
<a href="#">
|
||||
<span class="fa-stack">
|
||||
<i class="fa fa-square fa-stack-2x"></i>
|
||||
<i class="fa fa-facebook-f fa-stack-1x fa-inverse"></i>
|
||||
</span>
|
||||
Facebook Icon
|
||||
</a>
|
||||
<a href="#">
|
||||
<span class="fa-stack">
|
||||
<i class="fa fa-square fa-stack-2x"></i>
|
||||
<i class="fa fa-github fa-stack-1x fa-inverse"></i>
|
||||
</span>
|
||||
GitHub Icon
|
||||
</a>
|
||||
</p>
|
||||
<p>
|
||||
<a href="#">
|
||||
<span class="fa-stack">
|
||||
<i class="fa fa-circle fa-stack-2x"></i>
|
||||
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
|
||||
</span>
|
||||
Twitter Icon
|
||||
</a>
|
||||
<a href="#">
|
||||
<span class="fa-stack">
|
||||
<i class="fa fa-circle fa-stack-2x"></i>
|
||||
<i class="fa fa-facebook-f fa-stack-1x fa-inverse"></i>
|
||||
</span>
|
||||
Facebook Icon
|
||||
</a>
|
||||
<a href="#">
|
||||
<span class="fa-stack">
|
||||
<i class="fa fa-circle fa-stack-2x"></i>
|
||||
<i class="fa fa-github fa-stack-1x fa-inverse"></i>
|
||||
</span>
|
||||
GitHub Icon
|
||||
</a>
|
||||
</p>
|
||||
<p>
|
||||
<a href="#">
|
||||
<span class="fa-stack">
|
||||
<i class="fa fa-circle-o fa-stack-2x"></i>
|
||||
<i class="fa fa-twitter fa-stack-1x"></i>
|
||||
</span>
|
||||
Twitter Icon
|
||||
</a>
|
||||
<a href="#">
|
||||
<span class="fa-stack">
|
||||
<i class="fa fa-circle-o fa-stack-2x"></i>
|
||||
<i class="fa fa-facebook-f fa-stack-1x"></i>
|
||||
</span>
|
||||
Facebook Icon
|
||||
</a>
|
||||
<a href="#">
|
||||
<span class="fa-stack">
|
||||
<i class="fa fa-circle-o fa-stack-2x"></i>
|
||||
<i class="fa fa-github fa-stack-1x"></i>
|
||||
</span>
|
||||
GitHub Icon
|
||||
</a>
|
||||
</p>
|
@ -0,0 +1,4 @@
|
||||
<span class="fa-stack">
|
||||
<i class="fa fa-calendar-o fa-stack-2x"></i>
|
||||
<span class="fa-stack-1x padding-top-sm">27</span>
|
||||
</span>
|
@ -0,0 +1,58 @@
|
||||
<span style="border: solid 1px #d3d3d3; display: inline-block; text-align: center">
|
||||
<span class="fa-stack">
|
||||
<i class="fa fa-square fa-stack-2x"></i>
|
||||
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
|
||||
</span><br>Center
|
||||
</span>
|
||||
<hr>
|
||||
<p>
|
||||
<span class="fa-stack">
|
||||
<i class="fa fa-square fa-stack-2x"></i>
|
||||
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
|
||||
</span>
|
||||
Twitter Icon
|
||||
<span class="fa-stack">
|
||||
<i class="fa fa-square fa-stack-2x"></i>
|
||||
<i class="fa fa-facebook-f fa-stack-1x fa-inverse"></i>
|
||||
</span>
|
||||
Facebook Icon
|
||||
<span class="fa-stack">
|
||||
<i class="fa fa-square fa-stack-2x"></i>
|
||||
<i class="fa fa-github fa-stack-1x fa-inverse"></i>
|
||||
</span>
|
||||
GitHub Icon
|
||||
</p>
|
||||
<p>
|
||||
<span class="fa-stack">
|
||||
<i class="fa fa-circle fa-stack-2x"></i>
|
||||
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
|
||||
</span>
|
||||
Twitter Icon
|
||||
<span class="fa-stack">
|
||||
<i class="fa fa-circle fa-stack-2x"></i>
|
||||
<i class="fa fa-facebook-f fa-stack-1x fa-inverse"></i>
|
||||
</span>
|
||||
Facebook Icon
|
||||
<span class="fa-stack">
|
||||
<i class="fa fa-circle fa-stack-2x"></i>
|
||||
<i class="fa fa-github fa-stack-1x fa-inverse"></i>
|
||||
</span>
|
||||
GitHub Icon
|
||||
</p>
|
||||
<p>
|
||||
<span class="fa-stack">
|
||||
<i class="fa fa-circle-o fa-stack-2x"></i>
|
||||
<i class="fa fa-twitter fa-stack-1x"></i>
|
||||
</span>
|
||||
Twitter Icon
|
||||
<span class="fa-stack">
|
||||
<i class="fa fa-circle-o fa-stack-2x"></i>
|
||||
<i class="fa fa-facebook-f fa-stack-1x"></i>
|
||||
</span>
|
||||
Facebook Icon
|
||||
<span class="fa-stack">
|
||||
<i class="fa fa-circle-o fa-stack-2x"></i>
|
||||
<i class="fa fa-github fa-stack-1x"></i>
|
||||
</span>
|
||||
GitHub Icon
|
||||
</p>
|
@ -0,0 +1,26 @@
|
||||
<section id="thanks-to">
|
||||
<h2 class="page-header">Thanks To</h2>
|
||||
<div class="row">
|
||||
<div class="col-md-4 col-sm-4">
|
||||
<p>
|
||||
Thanks to <a href="https://twitter.com/robmadole/">@robmadole</a> and
|
||||
<a href="https://twitter.com/supercodepoet/">@supercodepoet</a> for icon design
|
||||
review, advice, some Jekyll help, and being all around badass coders.
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-4 col-sm-4">
|
||||
<p>
|
||||
HUGE thanks to <a href="https://twitter.com/gtagliala">@gtagliala</a> for doing such a fantastic job managing
|
||||
pull requests and issues on the Font Awesome
|
||||
<a href="{{ site.fontawesome.github.url }}">GitHub project</a>.
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-4 col-sm-4">
|
||||
<p>
|
||||
Thanks to <a href="http://tracking.maxcdn.com/c/148092/3982/378"><i class="fa fa-maxcdn"> </i>MaxCDN</a> for providing the excellent
|
||||
<a href="http://www.bootstrapcdn.com/#fontawesome_tab">BootstrapCDN</a>, the fastest and easiest way to
|
||||
<a href="{{ page.relative_path }}get-started/#bootstrapcdn">get started</a> with Font Awesome.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
41
assets/adminLTE/plugins/font-awesome/src/_includes/why.html
Normal file
41
assets/adminLTE/plugins/font-awesome/src/_includes/why.html
Normal file
@ -0,0 +1,41 @@
|
||||
<section id="why" class="feature-list">
|
||||
<div class="row">
|
||||
<div class="col-md-4 col-sm-6">
|
||||
<h4><i class="fa fa-flag"></i> One Font, {{ icons | size }} Icons</h4>
|
||||
In a single collection, Font Awesome is a pictographic language of web-related actions.
|
||||
</div>
|
||||
<div class="col-md-4 col-sm-6">
|
||||
<h4><i class="fa fa-ban"></i> No JavaScript Required</h4>
|
||||
Fewer compatibility concerns because Font Awesome doesn't require JavaScript.
|
||||
</div>
|
||||
<div class="col-md-4 col-sm-6">
|
||||
<h4><i class="fa fa-arrows-alt"></i> Infinite Scalability</h4>
|
||||
Scalable vector graphics means every icon looks awesome at any size.
|
||||
</div>
|
||||
<div class="col-md-4 col-sm-6">
|
||||
<h4><i class="fa fa-microphone"></i> Free, as in Speech</h4>
|
||||
Font Awesome is completely free for commercial use. Check out the <a href="{{ page.relative_path }}license/">license</a>.
|
||||
</div>
|
||||
<div class="col-md-4 col-sm-6">
|
||||
<h4><i class="fa fa-pencil"></i> CSS Control</h4>
|
||||
Easily style icon color, size, shadow, and anything that's possible with CSS.
|
||||
</div>
|
||||
<div class="col-md-4 col-sm-6">
|
||||
<h4><i class="fa fa-eye"></i> Perfect on Retina Displays</h4>
|
||||
Font Awesome icons are vectors, which mean they're gorgeous on high-resolution displays.
|
||||
</div>
|
||||
<div class="col-md-4 col-sm-6">
|
||||
<h4><i class="fa fa-gamepad"></i> Plays Well with Others</h4>
|
||||
Originally designed for <a href="{{ site.bootstrap.url }}">Bootstrap</a>, Font Awesome works great with all frameworks.
|
||||
</div>
|
||||
<div class="col-md-4 col-sm-6">
|
||||
<h4><i class="fa fa-desktop"></i> Desktop Friendly</h4>
|
||||
To use on the desktop or for a complete set of vectors,
|
||||
check out the <a href="{{ page.relative_path }}cheatsheet/">cheatsheet</a>.
|
||||
</div>
|
||||
<div class="col-md-4 col-sm-6">
|
||||
<h4><i class="fa fa-search"></i> Screen Reader Compatible</h4>
|
||||
Font Awesome won't trip up screen readers, unlike other icon fonts.
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
Reference in New Issue
Block a user