diff options
Diffstat (limited to 'static/fork-awesome/src/doc/_includes')
67 files changed, 1985 insertions, 0 deletions
diff --git a/static/fork-awesome/src/doc/_includes/accessibility/accessibility-manual.html b/static/fork-awesome/src/doc/_includes/accessibility/accessibility-manual.html new file mode 100644 index 0000000..1f68205 --- /dev/null +++ b/static/fork-awesome/src/doc/_includes/accessibility/accessibility-manual.html @@ -0,0 +1,121 @@ +<section id="accessibility-manual" class="accessibility-manual"> + + <h3> + <i class="gg-col fa fa-wrench text-muted fa-lg padding-right" aria-hidden="true"></i> + Manually make your icons accessible + </h3> + + <p>When using icons in your UI, there are manual techniques and ways to help assistive technology either ignore or better understand {{ site.forkawesome.name }}.</p> + + <h4 class="margin-top-xl">Icons used for pure decoration or visual styling</h4> + <p>If you're using an icon to add some extra decoration or branding, it does not need to be announced to users as they are navigating your site or app aurally. Additionally, if you're using an icon to visually re-emphasize or add styling to content already present in your HTML, it does not need to be repeated to an assistive technology-using user. You can make sure this is not read by adding the <code>aria-hidden="true"</code> to your {{ site.forkawesome.name }} markup.</p> + + <div class="margin-top-lg margin-bottom-lg"> +{% highlight html %} +<i class="fa fa-fighter-jet" aria-hidden="true"></i> +{% endhighlight %} +<small class="text-muted">an icon being used as pure decoration</small> + </div> + + <div class="margin-bottom-lg"> +{% highlight html %} +<h1 class="logo"> + <i class="fa fa-pied-piper" aria-hidden="true"></i> + Pied Piper, A Middle-Out Compression Solution Making Data Storage Problems Smaller +</h1> +{% endhighlight %} +<small class="text-muted">an icon being used as a logo</small> + </div> + + <div class="margin-bottom-lg"> +{% highlight html %} +<a href="https://github.com/FortAwesome/Font-Awesome"><i class="fa fa-github" aria-hidden="true"></i> View this project's code on Github</a> +{% endhighlight %} +<small class="text-muted">an icon being used in front of link text</small> + </div> + + <h4 class="margin-top-xl">Icons with semantic or interactive purpose</h4> + <p> + If you're using an icon to convey meaning (rather than only as a decorative element), ensure that this meaning is also conveyed to assistive technologies. This goes for content you're abbreviating via icons as well as interactive controls (buttons, form elements, toggles, etc.). There are a few techniques to accomplish this: + </p> + + <h4 class="margin-top-xl text-muted">If an icon is <strong>not</strong> an interactive element</h4> + <p> + The simplest way to provide a text alternative is to use the <code>aria-hidden="true"</code> attribute on the icon and to include the text with an additional element, such as a <code><span></code>, with appropriate CSS to visually hide the element while keeping it accessible to assistive technologies. In addition, you can add a <code>title</code> attribute on the icon to provide a tooltip for sighted mouse users. + </p> + + <div class="margin-bottom-lg margin-top-lg"> +{% highlight html %} +<dl> + <dt> + <i class="fa fa-car" aria-hidden="true" title="Time to destination by car"></i> + <span class="sr-only">Time to destination by car:</span> + </dt> + <dd>4 minutes</dd> + + <dt> + <i class="fa fa-bicycle" aria-hidden="true" title="Time to destination by bike"></i> + <span class="sr-only">Time to destination by bike:</span> + </dt> + <dd>12 minutes</dd> +</dl> +{% endhighlight %} + <small class="text-muted">an icon being used to communicate travel methods</small> + </div> + + <div class="margin-bottom-lg margin-top-lg"> +{% highlight html %} +<i class="fa fa-hourglass" aria-hidden="true" title="60 minutes remain in your exam"></i> +<span class="sr-only">60 minutes remain in your exam</span> + +<i class="fa fa-hourglass-half" aria-hidden="true" title="30 minutes remain in your exam"></i> +<span class="sr-only">30 minutes remain in your exam</span> + +<i class="fa fa-hourglass-end" aria-hidden="true" title="0 minutes remain in your exam"></i> +<span class="sr-only">0 minutes remain in your exam</span> +{% endhighlight %} + <small class="text-muted">an icon being used to denote time remaining</small> + </div> + + <h4 class="margin-top-xl text-muted">If an icon represents an interactive element</h4> + <p> + In the case of focusable interactive elements, there are various options to include an alternative text or label to the element, without the need for any visually hidden <code><span></code> or similar. For instance, simply adding the <code>aria-label</code> attribute with a text description to the interactive element itself will be sufficient to provide an accessible alternative name for the element. If you need to provide a visual tooltip on mouseover/focus, we recommend additionally using the <code>title</code> attribute or a <a href="https://github.com/chinchang/hint.css">custom tooltip</a> solution. + </p> + + <div class="margin-bottom-lg margin-top-lg"> +{% highlight html %} +<a href="path/to/shopping/cart" aria-label="View 3 items in your shopping cart"> + <i class="fa fa-shopping-cart" aria-hidden="true"></i> +</a> +{% endhighlight %} + <small class="text-muted">an icon being used to communicate shopping cart state</small> + </div> + + <div class="margin-bottom-lg margin-top-lg"> +{% highlight html %} +<a href="#navigation-main" aria-label="Skip to main navigation"> + <i class="fa fa-bars" aria-hidden="true"></i> +</a> +{% endhighlight %} + <small class="text-muted">an icon being used as a link to a navigation menu</small> + </div> + + <div class="margin-bottom-lg margin-top-lg"> +{% highlight html %} +<a class="btn btn-danger" href="path/to/settings" aria-label="Delete"> + <i class="fa fa-trash-o" aria-hidden="true" title="Delete this item?"></i> +</a> +{% endhighlight %} + <small class="text-muted">an icon being used as a delete button's symbol with a <code>title</code> attribute to provide a native mouse tooltip</small> + </div> + + + <div class="alert alert-success"> + <ul class="fa-ul margin-bottom-none"> + <li> + <i class="fa-li fa fa-info-circle fa-lg" aria-hidden"true"></i> + <a href="{{ page.relative_path }}examples/#accessible">See more examples of how to add accessibility-minded icons</a> into your UI. + </li> + </ul> + </div> +</section> diff --git a/static/fork-awesome/src/doc/_includes/accessibility/background.html b/static/fork-awesome/src/doc/_includes/accessibility/background.html new file mode 100644 index 0000000..ac26a4a --- /dev/null +++ b/static/fork-awesome/src/doc/_includes/accessibility/background.html @@ -0,0 +1,15 @@ +<div id="accessibility-background"> + <h4 class="margin-top-none">About Icon Fonts & Accessibility</h4> + <p> + Modern versions of assistive technology, like screen readers, will read CSS generated content (how {{ site.forkawesome.name }} icons are rendered), as well as specific Unicode characters. When reading our default markup for rendering icons, assisistive technology may have the following problems. + </p> + + <ul> + <li> + The assistive technology may not find any content to read out to a user + </li> + <li> + The assistive technology may read the unicode equivalent, which could not match up to what the icon means in context, or worse is just plain confusing + </li> + </ul> +</div> diff --git a/static/fork-awesome/src/doc/_includes/accessibility/other.html b/static/fork-awesome/src/doc/_includes/accessibility/other.html new file mode 100644 index 0000000..d3054ba --- /dev/null +++ b/static/fork-awesome/src/doc/_includes/accessibility/other.html @@ -0,0 +1,17 @@ +<section id="accessibility-other" class="accessibility-other"> + <h2 class="page-header">Other cases and information</h2> + <p> + While the scenarios and techniques here help avoid some serious issues and confusion, they are not exhaustive. There are many complex contexts and use cases when it comes to accessibility, such as users with low vision who need a high color contrast ratio to see UI. There are some great tools and resources to learn from and work on these issues out there. Here are a few reads we recommend. + </p> + + <ul> + <li><a href="https://www.filamentgroup.com/lab/bulletproof_icon_fonts.html">https://www.filamentgroup.com/lab/bulletproof_icon_fonts.html</a></li> + <li><a href="https://css-tricks.com/html-for-icon-font-usage/">https://css-tricks.com/html-for-icon-font-usage/</a></li> + <li><a href="http://www.sitepoint.com/icon-fonts-vs-svg-debate/">http://www.sitepoint.com/icon-fonts-vs-svg-debate/</a></li> + <li><a href="http://leaverou.github.io/contrast-ratio">http://leaverou.github.io/contrast-ratio/</a></li> + </ul> + + <p> + We'll continue to work on these under the larger topic of accessibility, but in the meantime, <a href="{{ page.relative_path }}community/#reporting-bugs">let us know if any bugs or issues</a>. + </p> +</section> diff --git a/static/fork-awesome/src/doc/_includes/brand-adblock-warning.html b/static/fork-awesome/src/doc/_includes/brand-adblock-warning.html new file mode 100644 index 0000000..1f7e1d6 --- /dev/null +++ b/static/fork-awesome/src/doc/_includes/brand-adblock-warning.html @@ -0,0 +1,5 @@ +<h4><i class="fa fa-warning" aria-hidden"true"></i> Warning!</h4> +Apparently, Adblock Plus can remove {{ site.forkawesome.name }} 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. diff --git a/static/fork-awesome/src/doc/_includes/brand-license.html b/static/fork-awesome/src/doc/_includes/brand-license.html new file mode 100644 index 0000000..475aa7e --- /dev/null +++ b/static/fork-awesome/src/doc/_includes/brand-license.html @@ -0,0 +1,6 @@ +<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 {{ site.forkawesome.name }}, nor vice versa.</li> + <li>Brand icons should only be used to represent the company or product to which they refer.</li> + <li class="strong">Please do not use brand logos for any purpose except to represent that particular brand or service.</li> +</ul> diff --git a/static/fork-awesome/src/doc/_includes/code/core.less b/static/fork-awesome/src/doc/_includes/code/core.less new file mode 100644 index 0000000..7ca5f74 --- /dev/null +++ b/static/fork-awesome/src/doc/_includes/code/core.less @@ -0,0 +1,6 @@ + display: inline-block; + font: normal normal normal @fa-font-size-base/@fa-line-height-base @fa-font-family; // 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; diff --git a/static/fork-awesome/src/doc/_includes/code/core.scss b/static/fork-awesome/src/doc/_includes/code/core.scss new file mode 100644 index 0000000..4114bc8 --- /dev/null +++ b/static/fork-awesome/src/doc/_includes/code/core.scss @@ -0,0 +1,6 @@ + display: inline-block; + font: normal normal normal #{$fa-font-size-base}/#{$fa-line-height-base} #{$fa-font-family}; // 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; diff --git a/static/fork-awesome/src/doc/_includes/code/license.css b/static/fork-awesome/src/doc/_includes/code/license.css new file mode 100644 index 0000000..43068be --- /dev/null +++ b/static/fork-awesome/src/doc/_includes/code/license.css @@ -0,0 +1,12 @@ +/*! +{{ site.forkawesome.name }} {{ site.forkawesome.version }} +License - {{ site.forkawesome.url }}license + +Copyright 2018 {{ site.fontawesome.author.name }} & {{ site.forkawesome.name }} + +Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. + */ diff --git a/static/fork-awesome/src/doc/_includes/community/getting-support.html b/static/fork-awesome/src/doc/_includes/community/getting-support.html new file mode 100644 index 0000000..c51cfcf --- /dev/null +++ b/static/fork-awesome/src/doc/_includes/community/getting-support.html @@ -0,0 +1,19 @@ +<div id="getting-support"> + <h2 class="page-header">Getting Support</h2> + <p> + Having trouble getting {{ site.forkawesome.name }} up and running? Something not working the way you think it should? + </p> + <ol> + <li> + Make sure you've read the latest version of how to <a href="{{ page.relative_path }}get-started/">get started</a>. + </li> + <li> + Since {{ site.forkawesome.name }} is based on {{ site.fontawesome.name }}, 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=fork-awesome">Ask a new question</a>, then. + </li> + </ol> +</div> diff --git a/static/fork-awesome/src/doc/_includes/community/project-milestones.html b/static/fork-awesome/src/doc/_includes/community/project-milestones.html new file mode 100644 index 0000000..62a7b8c --- /dev/null +++ b/static/fork-awesome/src/doc/_includes/community/project-milestones.html @@ -0,0 +1,8 @@ +<section id="project-milestones"> + <h2 class="page-header">Projects</h2> + <p> + Want to keep up with what's planned for {{ site.forkawesome.name }}? Check out our + <a href="{{ site.forkawesome.github.url }}/projects">projects</a> on the GitHub repo. + And come help us achieve those goals. + </p> +</section> diff --git a/static/fork-awesome/src/doc/_includes/community/reporting-bugs.html b/static/fork-awesome/src/doc/_includes/community/reporting-bugs.html new file mode 100644 index 0000000..1ad5994 --- /dev/null +++ b/static/fork-awesome/src/doc/_includes/community/reporting-bugs.html @@ -0,0 +1,18 @@ +<section id="reporting-bugs"> + <h2 class="page-header">Reporting Bugs</h2> + <p> + Found a problem with {{ site.forkawesome.name }}? Feel free to submit an issue on the GitHub project. But please keep the following in mind: + </p> + <ol> + <li>Please be nice. {{ site.forkawesome.name }} is a happy place.</li> + <li>Please <a href="{{ site.forkawesome.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.forkawesome.github.url }}/issues/new">submit an issue</a>. + </li> + </ol> +</section> diff --git a/static/fork-awesome/src/doc/_includes/community/requesting-new-icons.html b/static/fork-awesome/src/doc/_includes/community/requesting-new-icons.html new file mode 100644 index 0000000..6865e95 --- /dev/null +++ b/static/fork-awesome/src/doc/_includes/community/requesting-new-icons.html @@ -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.forkawesome.github.url }}/issues">{{ site.forkawesome.name }} community on GitHub</a>. Want to request a new + icon? Here are some things to keep in mind: + </p> + <ol> + <li>Please be nice. {{ site.forkawesome.name }} is a happy place.</li> + <li>Please <a href="{{ site.forkawesome.github.url }}/search?type=Issues">search</a> to see if your icon request already exists. If a request is found, please add a 👍 reaction to 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.forkawesome.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" title="Smiling face"></i> + </li> + </ol> +</section> diff --git a/static/fork-awesome/src/doc/_includes/community/submitting-pull-requests.html b/static/fork-awesome/src/doc/_includes/community/submitting-pull-requests.html new file mode 100644 index 0000000..83f3313 --- /dev/null +++ b/static/fork-awesome/src/doc/_includes/community/submitting-pull-requests.html @@ -0,0 +1,18 @@ +<section id="submitting-pull-requests"> + <h2 class="page-header">Submitting Pull Requests</h2> + Found a way to solve a bug in {{ site.forkawesome.name }}? Want to contribute new features or a new icon? + <ol> + <li> + Clone the repository and work on your proposal. + </li> + <li> + Then, when you think it's ready or when you want feedback, + <a href="{{ site.forkawesome.github.url }}/issues/new">submit a pull + request</a>. + </li> + <li> + Discuss with rest of the community and follow up on conversations until + your pull request is merged. + </li> + </ol> +</section> diff --git a/static/fork-awesome/src/doc/_includes/examples/accessible.html b/static/fork-awesome/src/doc/_includes/examples/accessible.html new file mode 100644 index 0000000..0360a46 --- /dev/null +++ b/static/fork-awesome/src/doc/_includes/examples/accessible.html @@ -0,0 +1,101 @@ +<section id="accessible"> + <h2 class="page-header"> + Accessibility-Minded + </h2> + <div class="row"> + <div class="col-md-3 col-sm-4"> + <p> + <a class="btn btn-default" href="path/to/settings" aria-label="Settings"> + <i class="fa fa-cog" aria-hidden="true"></i> + </a> + + <a class="btn btn-danger" href="path/to/settings" aria-label="Delete"> + <i class="fa fa-trash-o" aria-hidden="true"></i> + </a> + + <a class="btn btn-primary" href="#navigation-main" aria-label="Skip to main navigation"> + <i class="fa fa-bars" aria-hidden="true"></i> + </a> + </p> + + <p> + <i class="fa fa-refresh fa-spin fa-3x fa-fw" aria-hidden="true"></i> + <span class="sr-only">Refreshing...</span> + + <i class="fa fa-cog fa-spin fa-3x fa-fw" aria-hidden="true"></i> + <span class="sr-only">Saving. Hang tight!</span> + </p> + + <p> + <div class="input-group margin-bottom-sm"> + <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw" aria-hidden="true"></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" aria-hidden="true"></i></span> + <input class="form-control" type="password" placeholder="Password"> + </div> + </p> + + <p> + <a href="path/to/shopping/cart" class="btn btn-primary" aria-label="View 3 items in your shopping cart"> + <i class="fa fa-shopping-cart" aria-hidden="true"></i> + </a> + </p> + + <p> + <i class="fa fa-battery-half" aria-hidden="true"></i> + <span class="sr-only">Battery level: 50%</span> + </p> + </div> + <div class="col-md-9 col-sm-8"> + <p> + With <a href="{{ page.relative_path }}accessibility/">our thoughts on icon accessibility</a> in mind, If an icon only adds some extra decoration or branding, it does not need to be announced to users as they are navigating your site or app aurally. Alternatively, if an icon conveys meaning in your content or interface, ensure that this meaning is also conveyed to assistive technologies through alternative displays or text. + </p> + +{% highlight html %} +<a class="btn btn-default" href="path/to/settings" aria-label="Settings"> + <i class="fa fa-cog" aria-hidden="true"></i> +</a> + +<a class="btn btn-danger" href="path/to/settings" aria-label="Delete"> + <i class="fa fa-trash-o" aria-hidden="true"></i> +</a> + +<a class="btn btn-primary" href="#navigation-main" aria-label="Skip to main navigation"> + <i class="fa fa-bars" aria-hidden="true"></i> +</a> +{% endhighlight %} + +{% highlight html %} +<i class="fa fa-refresh fa-spin fa-3x fa-fw" aria-hidden="true"></i> +<span class="sr-only">Refreshing...</span> + +<i class="fa fa-cog fa-spin fa-3x fa-fw" aria-hidden="true"></i> +<span class="sr-only">Saving. Hang tight!</span> +{% endhighlight %} + +{% highlight html %} +<div class="input-group margin-bottom-sm"> + <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw" aria-hidden="true"></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" aria-hidden="true"></i></span> + <input class="form-control" type="password" placeholder="Password"> +</div> +{% endhighlight %} + +{% highlight html %} +<a href="path/to/shopping/cart" class="btn btn-primary" aria-label="View 3 items in your shopping cart"> + <i class="fa fa-shopping-cart" aria-hidden="true"></i> +</a> +{% endhighlight %} + +{% highlight html %} +<i class="fa fa-battery-half" aria-hidden="true"></i> +<span class="sr-only">Battery level: 50%</span> +{% endhighlight %} + </div> + </div> +</section> diff --git a/static/fork-awesome/src/doc/_includes/examples/animated.html b/static/fork-awesome/src/doc/_includes/examples/animated.html new file mode 100644 index 0000000..595bff9 --- /dev/null +++ b/static/fork-awesome/src/doc/_includes/examples/animated.html @@ -0,0 +1,60 @@ +<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/{{ site.forkawesome.github.org }}/{{ site.forkawesome.github.project }}/blob/{{ site.forkawesome.version }}/less/animated.less" class="text-muted padding-right">View LESS</a> + <a href="https://github.com/{{ site.forkawesome.github.org }}/{{ site.forkawesome.github.project }}/blob/{{ site.forkawesome.version }}/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> + <span class="sr-only">Loading example (with fa-spinner icon)</span> + + <i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw margin-bottom"></i> + <span class="sr-only">Loading (with fa-circle-o-notch icon)</span> + + <i class="fa fa-refresh fa-spin fa-3x fa-fw margin-bottom"></i> + <span class="sr-only">Loading example (with fa-refresh icon)</span> + + <i class="fa fa-cog fa-spin fa-3x fa-fw margin-bottom"></i> + <span class="sr-only">Loading example (with fa-cog icon)</span> + + <i class="fa fa-spinner fa-pulse fa-3x fa-fw margin-bottom"></i> + <span class="sr-only">Loading example (with fa-spinner icon)</span> + </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 fa-3x fa-fw"></i> +<span class="sr-only">Loading...</span> + +<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i> +<span class="sr-only">Loading...</span> + +<i class="fa fa-refresh fa-spin fa-3x fa-fw"></i> +<span class="sr-only">Loading...</span> + +<i class="fa fa-cog fa-spin fa-3x fa-fw"></i> +<span class="sr-only">Loading...</span> + +<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i> +<span class="sr-only">Loading...</span> +{% endhighlight %} + <p class="alert alert-success"> + <i class="fa fa-exclamation-triangle fa-lg" aria-hidden="true"></i><strong class="sr-only">Note:</strong> + 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" aria-hidden="true"></i><strong class="sr-only">Note:</strong> CSS3 animations aren't supported in IE8 - IE9. + </p> + </div> + </div> +</section> diff --git a/static/fork-awesome/src/doc/_includes/examples/basic.html b/static/fork-awesome/src/doc/_includes/examples/basic.html new file mode 100644 index 0000000..dbccc71 --- /dev/null +++ b/static/fork-awesome/src/doc/_includes/examples/basic.html @@ -0,0 +1,39 @@ +<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/{{ site.forkawesome.github.org }}/{{ site.forkawesome.github.project }}/blob/{{ site.forkawesome.version }}/less/core.less" class="text-muted padding-right">View LESS</a> + <a href="https://github.com/{{ site.forkawesome.github.org }}/{{ site.forkawesome.github.project }}/blob/{{ site.forkawesome.version }}/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> + <span class="sr-only">Example: basic icon</span> + fa-camera-retro + </p> + </div> + <div class="col-md-9 col-sm-8"> + <p> + You can place {{ site.forkawesome.name }} icons just about anywhere using the CSS Prefix <code>fa</code> and the icon's + name. Fork 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" aria-hidden="true"></i> + <strong class="sr-only">Example: basic icon</strong> + 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> diff --git a/static/fork-awesome/src/doc/_includes/examples/bootstrap.html b/static/fork-awesome/src/doc/_includes/examples/bootstrap.html new file mode 100644 index 0000000..2ec5273 --- /dev/null +++ b/static/fork-awesome/src/doc/_includes/examples/bootstrap.html @@ -0,0 +1,111 @@ +<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-code-fork fa-2x pull-left"></i> {{ site.forkawesome.name }}<br>Version {{ site.forkawesome.version }}</a> + </p> + <div class="margin-bottom"> + <div class="btn-group"> + <a class="btn btn-default" href="#"> + <i class="fa fa-align-left" title="Align Left"></i> + </a> + <a class="btn btn-default" href="#"> + <i class="fa fa-align-center" title="Align Center"></i> + </a> + <a class="btn btn-default" href="#"> + <i class="fa fa-align-right" title="Align Right"></i> + </a> + <a class="btn btn-default" href="#"> + <i class="fa fa-align-justify" title="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" title="Toggle dropdown menu"></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="fa fa-unlock"></i> Make admin</a></li> + </ul> + </div> + </div> + + </div> + <div class="col-md-9 col-sm-8"> + <p> + {{ site.forkawesome.name }} 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> {{ site.forkawesome.name }}<br>Version {{ site.fontawesome.version }}</a> + +<div class="btn-group"> + <a class="btn btn-default" href="#"> + <i class="fa fa-align-left" title="Align Left"></i> + </a> + <a class="btn btn-default" href="#"> + <i class="fa fa-align-center" title="Align Center"></i> + </a> + <a class="btn btn-default" href="#"> + <i class="fa fa-align-right" title="Align Right"></i> + </a> + <a class="btn btn-default" href="#"> + <i class="fa fa-align-justify" title="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" title="Toggle dropdown menu"></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="fa fa-unlock"></i> Make admin</a></li> + </ul> +</div> +{% endhighlight %} + </div> + </div> +</section> diff --git a/static/fork-awesome/src/doc/_includes/examples/bordered-pulled.html b/static/fork-awesome/src/doc/_includes/examples/bordered-pulled.html new file mode 100644 index 0000000..78928fc --- /dev/null +++ b/static/fork-awesome/src/doc/_includes/examples/bordered-pulled.html @@ -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/{{ site.forkawesome.github.org }}/{{ site.forkawesome.github.project }}/blob/{{ site.forkawesome.version }}/less/bordered-pulled.less" class="text-muted padding-right">View LESS</a> + <a href="https://github.com/{{ site.forkawesome.github.org }}/{{ site.forkawesome.github.project }}/blob/{{ site.forkawesome.version }}/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" aria-hidden="true"></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" aria-hidden="true"></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> diff --git a/static/fork-awesome/src/doc/_includes/examples/custom.html b/static/fork-awesome/src/doc/_includes/examples/custom.html new file mode 100644 index 0000000..2de7ad7 --- /dev/null +++ b/static/fork-awesome/src/doc/_includes/examples/custom.html @@ -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> diff --git a/static/fork-awesome/src/doc/_includes/examples/fixed-width.html b/static/fork-awesome/src/doc/_includes/examples/fixed-width.html new file mode 100644 index 0000000..0ba0610 --- /dev/null +++ b/static/fork-awesome/src/doc/_includes/examples/fixed-width.html @@ -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/{{ site.forkawesome.github.org }}/{{ site.forkawesome.github.project }}/blob/{{ site.forkawesome.version }}/less/fixed-width.less" class="text-muted padding-right">View LESS</a> + <a href="https://github.com/{{ site.forkawesome.github.org }}/{{ site.forkawesome.github.project }}/blob/{{ site.forkawesome.version }}/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" aria-hidden="true"></i> Home</a> + <a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i> Library</a> + <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i> Applications</a> + <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></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" aria-hidden="true"></i> Home</a> + <a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i> Library</a> + <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i> Applications</a> + <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i> Settings</a> +</div> +{% endhighlight %} + </div> + </div> +</section> diff --git a/static/fork-awesome/src/doc/_includes/examples/larger.html b/static/fork-awesome/src/doc/_includes/examples/larger.html new file mode 100644 index 0000000..7b9a250 --- /dev/null +++ b/static/fork-awesome/src/doc/_includes/examples/larger.html @@ -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/{{ site.forkawesome.github.org }}/{{ site.forkawesome.github.project }}/blob/{{ site.forkawesome.version }}/less/larger.less" class="text-muted padding-right">View LESS</a> + <a href="https://github.com/{{ site.forkawesome.github.org }}/{{ site.forkawesome.github.project }}/blob/{{ site.forkawesome.version }}/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" aria-hidden="true"></i> fa-lg</p> + <p><i class="fa fa-camera-retro fa-2x" aria-hidden="true"></i> fa-2x</p> + <p><i class="fa fa-camera-retro fa-3x" aria-hidden="true"></i> fa-3x</p> + <p><i class="fa fa-camera-retro fa-4x" aria-hidden="true"></i> fa-4x</p> + <p><i class="fa fa-camera-retro fa-5x" aria-hidden="true"></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> diff --git a/static/fork-awesome/src/doc/_includes/examples/list.html b/static/fork-awesome/src/doc/_includes/examples/list.html new file mode 100644 index 0000000..c164356 --- /dev/null +++ b/static/fork-awesome/src/doc/_includes/examples/list.html @@ -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/{{ site.forkawesome.github.org }}/{{ site.forkawesome.github.project }}/blob/{{ site.forkawesome.version }}/less/list.less" class="text-muted padding-right">View LESS</a> + <a href="https://github.com/{{ site.forkawesome.github.org }}/{{ site.forkawesome.github.project }}/blob/{{ site.forkawesome.version }}/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> diff --git a/static/fork-awesome/src/doc/_includes/examples/rotated-flipped.html b/static/fork-awesome/src/doc/_includes/examples/rotated-flipped.html new file mode 100644 index 0000000..a649962 --- /dev/null +++ b/static/fork-awesome/src/doc/_includes/examples/rotated-flipped.html @@ -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/{{ site.forkawesome.github.org }}/{{ site.forkawesome.github.project }}/blob/{{ site.forkawesome.version }}/less/rotated-flipped.less" class="text-muted padding-right">View LESS</a> + <a href="https://github.com/{{ site.forkawesome.github.org }}/{{ site.forkawesome.github.project }}/blob/{{ site.forkawesome.version }}/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" aria-hidden="true"></i> normal<br> + <i class="fa fa-shield fa-rotate-90" aria-hidden="true"></i> fa-rotate-90<br> + <i class="fa fa-shield fa-rotate-180" aria-hidden="true"></i> fa-rotate-180<br> + <i class="fa fa-shield fa-rotate-270" aria-hidden="true"></i> fa-rotate-270<br> + <i class="fa fa-shield fa-flip-horizontal" aria-hidden="true"></i> fa-flip-horizontal<br> + <i class="fa fa-shield fa-flip-vertical" aria-hidden="true"></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> diff --git a/static/fork-awesome/src/doc/_includes/examples/stacked.html b/static/fork-awesome/src/doc/_includes/examples/stacked.html new file mode 100644 index 0000000..65b3603 --- /dev/null +++ b/static/fork-awesome/src/doc/_includes/examples/stacked.html @@ -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/{{ site.forkawesome.github.org }}/{{ site.forkawesome.github.project }}/blob/{{ site.forkawesome.version }}/less/stacked.less" class="text-muted padding-right">View LESS</a> + <a href="https://github.com/{{ site.forkawesome.github.org }}/{{ site.forkawesome.github.project }}/blob/{{ site.forkawesome.version }}/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" aria-hidden="true"> + <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" aria-hidden="true"> + <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" aria-hidden="true"> + <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" aria-hidden="true"> + <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> diff --git a/static/fork-awesome/src/doc/_includes/footer.html b/static/fork-awesome/src/doc/_includes/footer.html new file mode 100644 index 0000000..325b41c --- /dev/null +++ b/static/fork-awesome/src/doc/_includes/footer.html @@ -0,0 +1,20 @@ +<footer id="footer" class="footer hidden-print"> + <div class="container text-center"> + <div> + <i class="fa fa-fork" aria-hidden="true"></i> {{ site.forkawesome.name }} {{ site.forkawesome.version }} + <span class="hide-xs">·</span><br class="hide-sm hide-md hide-lg"> + A fork of {{ site.fontawesome.name }}, originally created by <a href="https://twitter.com/{{ site.fontawesome.author.twitter }}">{{ site.fontawesome.author.name }}</a>, now maintained by a community. + </div> + <div> + {{ site.forkawesome.name }} is licensed under <a href="{{ site.forkawesome.license.font.url }}">{{ site.forkawesome.license.font.version }}</a> + <span class="hide-xs">·</span><br class="hide-sm hide-md hide-lg"> + Code is licensed under <a href="{{ site.forkawesome.license.code.url }}">{{ site.forkawesome.license.code.version }}</a> + <span class="hide-xs hide-sm">·</span><br class="hide-md hide-lg"> + Documentation is licensed under <a href="{{ site.forkawesome.license.documentation.url }}">{{ site.forkawesome.license.documentation.version }}</a> + </div> + <div class="project"> + <a href="{{ site.forkawesome.github.url }}">GitHub Project</a> · + <a href="{{ site.forkawesome.github.url }}/issues">Issues</a> + </div> + </div> +</footer> diff --git a/static/fork-awesome/src/doc/_includes/icons/accessibility.html b/static/fork-awesome/src/doc/_includes/icons/accessibility.html new file mode 100644 index 0000000..c9f6202 --- /dev/null +++ b/static/fork-awesome/src/doc/_includes/icons/accessibility.html @@ -0,0 +1,12 @@ +<section id="accessibility"> + <h2 class="page-header">Accessibility Icons</h2> + + <div class="row fontawesome-icon-list"> + {% assign icons_currency = icons | expand_aliases | where:"categories", "Accessibility 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 }}" aria-hidden="true"></i> <span class="sr-only">Example of </span>{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div> + {% endfor %} + </div> + +</section> diff --git a/static/fork-awesome/src/doc/_includes/icons/brand.html b/static/fork-awesome/src/doc/_includes/icons/brand.html new file mode 100644 index 0000000..6a740d6 --- /dev/null +++ b/static/fork-awesome/src/doc/_includes/icons/brand.html @@ -0,0 +1,19 @@ +<section id="brand"> + <h2 class="page-header">Brand Icons</h2> + + <div class="row fontawesome-icon-list margin-bottom-lg"> + {% assign icons_brand = icons | expand_aliases | where:"categories", "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 }}" aria-hidden="true"></i> <span class="sr-only">Example of </span>{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div> + {% endfor %} + </div> + + <div class="alert alert-warning"> + {% include brand-adblock-warning.html %} + </div> + + <div class="alert alert-success"> + {% include brand-license.html %} + </div> +</section> diff --git a/static/fork-awesome/src/doc/_includes/icons/chart.html b/static/fork-awesome/src/doc/_includes/icons/chart.html new file mode 100644 index 0000000..e0be4ab --- /dev/null +++ b/static/fork-awesome/src/doc/_includes/icons/chart.html @@ -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 | where:"categories", "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 }}" aria-hidden="true"></i> <span class="sr-only">Example of </span>{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div> + {% endfor %} + </div> + +</section> diff --git a/static/fork-awesome/src/doc/_includes/icons/currency.html b/static/fork-awesome/src/doc/_includes/icons/currency.html new file mode 100644 index 0000000..b8de574 --- /dev/null +++ b/static/fork-awesome/src/doc/_includes/icons/currency.html @@ -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 | where:"categories", "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 }}" aria-hidden="true"></i> <span class="sr-only">Example of </span>{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div> + {% endfor %} + </div> + +</section> diff --git a/static/fork-awesome/src/doc/_includes/icons/directional.html b/static/fork-awesome/src/doc/_includes/icons/directional.html new file mode 100644 index 0000000..3257dcc --- /dev/null +++ b/static/fork-awesome/src/doc/_includes/icons/directional.html @@ -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 | where:"categories", "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 }}" aria-hidden="true"></i> <span class="sr-only">Example of </span>{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div> + {% endfor %} + </div> + +</section> diff --git a/static/fork-awesome/src/doc/_includes/icons/file-type.html b/static/fork-awesome/src/doc/_includes/icons/file-type.html new file mode 100644 index 0000000..b1713bf --- /dev/null +++ b/static/fork-awesome/src/doc/_includes/icons/file-type.html @@ -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 | where:"categories", "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 }}" aria-hidden="true"></i> <span class="sr-only">Example of </span>{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div> + {% endfor %} + </div> + +</section> diff --git a/static/fork-awesome/src/doc/_includes/icons/form-control.html b/static/fork-awesome/src/doc/_includes/icons/form-control.html new file mode 100644 index 0000000..dd43d90 --- /dev/null +++ b/static/fork-awesome/src/doc/_includes/icons/form-control.html @@ -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 | where:"categories", "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 }}" aria-hidden="true"></i> <span class="sr-only">Example of </span>{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div> + {% endfor %} + </div> +</section> diff --git a/static/fork-awesome/src/doc/_includes/icons/gender.html b/static/fork-awesome/src/doc/_includes/icons/gender.html new file mode 100644 index 0000000..091cdff --- /dev/null +++ b/static/fork-awesome/src/doc/_includes/icons/gender.html @@ -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 | where:"categories", "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 }}" aria-hidden="true"></i> <span class="sr-only">Example of </span>{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div> + {% endfor %} + </div> + +</section> diff --git a/static/fork-awesome/src/doc/_includes/icons/hand.html b/static/fork-awesome/src/doc/_includes/icons/hand.html new file mode 100644 index 0000000..3f21f91 --- /dev/null +++ b/static/fork-awesome/src/doc/_includes/icons/hand.html @@ -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 | where:"categories", "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 }}" aria-hidden="true"></i> <span class="sr-only">Example of </span>{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div> + {% endfor %} + </div> + +</section> diff --git a/static/fork-awesome/src/doc/_includes/icons/medical.html b/static/fork-awesome/src/doc/_includes/icons/medical.html new file mode 100644 index 0000000..e27ca33 --- /dev/null +++ b/static/fork-awesome/src/doc/_includes/icons/medical.html @@ -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 | where:"categories", "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 }}" aria-hidden="true"></i> <span class="sr-only">Example of </span>{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div> + {% endfor %} + </div> + +</section> diff --git a/static/fork-awesome/src/doc/_includes/icons/new.html b/static/fork-awesome/src/doc/_includes/icons/new.html new file mode 100644 index 0000000..8cdd2b7 --- /dev/null +++ b/static/fork-awesome/src/doc/_includes/icons/new.html @@ -0,0 +1,19 @@ +<section id="new"> + {% assign version = 1.0 %} + {% assign icons_new = icons | where_exp:"icon", "icon.created >= version" | sort_by:'class' %} + + <h2 class="page-header">{{ icons_new | size }} New Icons since {{ version }}</h2> + {% if page.navbar_active != "icons" %} + <div class="margin-botom-large"> + You asked, {{ site.forkawesome.name }} delivers with {{ icons_new | size }} shiny new icons in version {{ 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"> + {% 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 }}" aria-hidden="true"></i> <span class="sr-only">Example of </span>{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div> + {% endfor %} + </div> + +</section> diff --git a/static/fork-awesome/src/doc/_includes/icons/payment.html b/static/fork-awesome/src/doc/_includes/icons/payment.html new file mode 100644 index 0000000..051cf50 --- /dev/null +++ b/static/fork-awesome/src/doc/_includes/icons/payment.html @@ -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 | where:"categories", "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 }}" aria-hidden="true"></i> <span class="sr-only">Example of </span>{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div> + {% endfor %} + </div> + +</section> diff --git a/static/fork-awesome/src/doc/_includes/icons/spinner.html b/static/fork-awesome/src/doc/_includes/icons/spinner.html new file mode 100644 index 0000000..c4bca75 --- /dev/null +++ b/static/fork-awesome/src/doc/_includes/icons/spinner.html @@ -0,0 +1,22 @@ +<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" aria-hidden="true"></i> + <strong class="sr-only">Note:</strong> + 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 | where:"categories", "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 }}" aria-hidden="true"></i> <span class="sr-only">Example of </span>{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div> + {% endfor %} + </div> +</section> diff --git a/static/fork-awesome/src/doc/_includes/icons/text-editor.html b/static/fork-awesome/src/doc/_includes/icons/text-editor.html new file mode 100644 index 0000000..20ac360 --- /dev/null +++ b/static/fork-awesome/src/doc/_includes/icons/text-editor.html @@ -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 | where:"categories", "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 }}" aria-hidden="true"></i> <span class="sr-only">Example of </span>{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div> + {% endfor %} + </div> + +</section> diff --git a/static/fork-awesome/src/doc/_includes/icons/transportation.html b/static/fork-awesome/src/doc/_includes/icons/transportation.html new file mode 100644 index 0000000..bf67ee4 --- /dev/null +++ b/static/fork-awesome/src/doc/_includes/icons/transportation.html @@ -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 | where:"categories", "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 }}" aria-hidden="true"></i> <span class="sr-only">Example of </span>{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div> + {% endfor %} + </div> + +</section> diff --git a/static/fork-awesome/src/doc/_includes/icons/video-player.html b/static/fork-awesome/src/doc/_includes/icons/video-player.html new file mode 100644 index 0000000..cb39c03 --- /dev/null +++ b/static/fork-awesome/src/doc/_includes/icons/video-player.html @@ -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 | where:"categories", "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 }}" aria-hidden="true"></i> <span class="sr-only">Example of </span>{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div> + {% endfor %} + </div> + +</section> diff --git a/static/fork-awesome/src/doc/_includes/icons/web-application.html b/static/fork-awesome/src/doc/_includes/icons/web-application.html new file mode 100644 index 0000000..453b875 --- /dev/null +++ b/static/fork-awesome/src/doc/_includes/icons/web-application.html @@ -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 | where:"categories", "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 }}" aria-hidden="true"></i> <span class="sr-only">Example of </span>{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div> + {% endfor %} + </div> + +</section> diff --git a/static/fork-awesome/src/doc/_includes/jumbotron-carousel.html b/static/fork-awesome/src/doc/_includes/jumbotron-carousel.html new file mode 100644 index 0000000..1d5b74c --- /dev/null +++ b/static/fork-awesome/src/doc/_includes/jumbotron-carousel.html @@ -0,0 +1,51 @@ +<div class="jumbotron jumbotron-carousel hidden-print"> + <div class="container"> + <div class="row"> + <div class="col-md-8 col-sm-8 text-center"> + <h1>{{ site.forkawesome.name }}</h1> + <p>{{ site.forkawesome.tagline }}</p> + <div class="actions"> + <a class="btn btn-default btn-lg" href="#modal-download" data-toggle="modal"> + <i class="fa fa-download fa-lg" aria-hidden="true"></i> + Download + </a> + </div> + <div class="shameless-self-promotion"> + Version {{ site.forkawesome.version }} + · + <a href="{{ site.forkawesome.github.url }}"> + <i class="fa fa-github-alt" aria-hidden="true"></i> GitHub Project + </a> + </div> + </div> + <div class="col-md-4 col-sm-4"> + <div id="icon-carousel" class="carousel slide"> + <div class="carousel-inner"> + <div class="active item"><div><i class="fa fa-fork-awesome" aria-hidden="true"></i><span class="sr-only">fork awesome icon</span></div></div> + <div class="item"><div><i class="fa fa-bath" aria-hidden="true"></i><span class="sr-only">bath icon</span></div></div> + <div class="item"><div><i class="fa fa-envelope-open-o" aria-hidden="true"></i><span class="sr-only">envelope icon</span></div></div> + <div class="item"><div><i class="fa fa-commenting" aria-hidden="true"></i><span class="sr-only">commenting icon</span></div></div> + <div class="item"><div><i class="fa fa-map-signs" aria-hidden="true"></i><span class="sr-only">map signs icon</span></div></div> + <div class="item"><div><i class="fa fa-camera-retro" aria-hidden="true"></i><span class="sr-only">camera icon</span></div></div> + <div class="item"><div><i class="fa fa-send-o" aria-hidden="true"></i><span class="sr-only">send icon</span></div></div> + <div class="item"><div><i class="fa fa-book" aria-hidden="true"></i><span class="sr-only">book icon</span></div></div> + <div class="item"><div><i class="fa fa-gitlab" aria-hidden="true"></i><span class="sr-only">gitlab icon</span></div></div> + <div class="item"><div><i class="fa fa-heart-o" aria-hidden="true"></i><span class="sr-only">heart icon</span></div></div> + <div class="item"><div><i class="fa fa-thumbs-o-up" aria-hidden="true"></i><span class="sr-only">thumbs up icon</span></div></div> + <div class="item"><div><i class="fa fa-mastodon" aria-hidden="true"></i><span class="sr-only">mastodon icon</span></div></div> + </div> + <!-- Carousel nav --> + <a class="carousel-control left" href="#icon-carousel" data-slide="prev"> + <i class="fa fa-arrow-circle-left" aria-hidden="true"></i> + <span class="sr-only">Previous</span> + </a> + <a class="carousel-control right" href="#icon-carousel" data-slide="next"> + <i class="fa fa-arrow-circle-right" aria-hidden="true"></i> + <span class="sr-only">Next</span> + </a> + </div> + </div> + </div> + + </div> +</div> diff --git a/static/fork-awesome/src/doc/_includes/jumbotron.html b/static/fork-awesome/src/doc/_includes/jumbotron.html new file mode 100644 index 0000000..84b5a51 --- /dev/null +++ b/static/fork-awesome/src/doc/_includes/jumbotron.html @@ -0,0 +1,17 @@ +<div class="jumbotron jumbotron-ad hidden-print"> + <div class="container"> + {% if page.in_page_nav %} + <div class="col-md-9"> + <h1>{{ jumbotron_h1 }}</h1> + <p>{{ jumbotron_p }}</p> + </div> + + <div class="col-md-3"> + {{ jumbotron_nav }} + </div> + {% else %} + <h1>{{ jumbotron_h1 }}</h1> + <p>{{ jumbotron_p }}</p> + {% endif %} + </div> +</div> diff --git a/static/fork-awesome/src/doc/_includes/modals/download.html b/static/fork-awesome/src/doc/_includes/modals/download.html new file mode 100644 index 0000000..a329f6b --- /dev/null +++ b/static/fork-awesome/src/doc/_includes/modals/download.html @@ -0,0 +1,25 @@ +<div class="modal fade" id="modal-download" tabindex="-1" role="dialog" aria-labelledby="modal-download-label" + xmlns="http://www.w3.org/1999/html"> + <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" aria-hidden="true"></i><span class="close"></span></button> + <h2 class="modal-title" id="modal-download-label"> + <i class="fa fa-download fa-lg" aria-hidden="true"></i> + Download + </h2> + </div> + <div class="modal-body"> + <a class="btn btn-primary btn-lg btn-block" href="{{ site.forkawesome.github.url }}/archive/{{ site.forkawesome.version }}.zip"> + {{ site.forkawesome.name }} {{ site.forkawesome.version }} + </a> + <div class="row margin-bottom-lg margin-top-lg"> + <div class="col-md-12 text-center"> + More ways to install {{ site.forkawesome.name }} coming soon!<br/> + In the meantime, don't forget to read <a href="{{ page.relative_path }}get-started">how to get started</a>. + </div> + </div> + </div> + </div> + </div> +</div> diff --git a/static/fork-awesome/src/doc/_includes/navbar.html b/static/fork-awesome/src/doc/_includes/navbar.html new file mode 100644 index 0000000..57b956a --- /dev/null +++ b/static/fork-awesome/src/doc/_includes/navbar.html @@ -0,0 +1,85 @@ +<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"> + <i class="fa fa-bars fa-lg" aria-hidden="true" title="Toggle navigation"></i> + <span class="sr-only">Toggle navigation</span> + </button> + <a class="navbar-brand" href="{{ page.relative_path }}"><i class="fa fa-fork-awesome" aria-hidden="true"></i> {{ site.forkawesome.name }}</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 class="hidden-sm{% if page.navbar_active == "get-started" %} active{% endif %}"><a href="{{ page.relative_path }}get-started/">Get Started</a></li> + <li class="hidden-xs hidden-md hidden-lg{% if page.navbar_active == "get-started" %} active{% endif %}"> + <a href="{{ page.relative_path }}get-started/">Start</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" aria-hidden="true" title="Toggle dropdown menu"></i> + <span class="sr-only">Toggle dropdown menu</span> + <span class="toggle drop down"></span> + </a> + <ul class="dropdown-menu pull-right"> + <li><a href="{{ page.relative_path }}icons/"><i class="fa fa-flag fa-fw" aria-hidden="true"></i> All Icons</a></li> + <li class="divider"></li> + <li><a href="{{ page.relative_path }}icons/#new"><i class="fa fa-handshake-o fa-fw" aria-hidden="true"></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" aria-hidden="true"></i> Web Application Icons</a></li> + <li><a href="{{ page.relative_path }}icons/#accessibility"><i class="fa fa-universal-access fa-fw" aria-hidden="true"></i> Accessibility Icons</a></li> + <li><a href="{{ page.relative_path }}icons/#hand"><i class="fa fa-hand-spock-o fa-fw" aria-hidden="true"></i> Hand Icons</a></li> + <li><a href="{{ page.relative_path }}icons/#transportation"><i class="fa fa-ship fa-fw" aria-hidden="true"></i> Transportation Icons</a></li> + <li><a href="{{ page.relative_path }}icons/#gender"><i class="fa fa-venus fa-fw" aria-hidden="true"></i> Gender Icons</a></li> + <li><a href="{{ page.relative_path }}icons/#file-type"><i class="fa fa-file-image-o fa-fw" aria-hidden="true"></i> File Type Icons</a></li> + <li><a href="{{ page.relative_path }}icons/#spinner"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i> Spinner Icons</a></li> + <li><a href="{{ page.relative_path }}icons/#form-control"><i class="fa fa-check-square fa-fw" aria-hidden="true"></i> Form Control Icons</a></li> + <li><a href="{{ page.relative_path }}icons/#payment"><i class="fa fa-credit-card fa-fw" aria-hidden="true"></i> Payment Icons</a></li> + <li><a href="{{ page.relative_path }}icons/#chart"><i class="fa fa-pie-chart fa-fw" aria-hidden="true"></i> Chart Icons</a></li> + <li><a href="{{ page.relative_path }}icons/#currency"><i class="fa fa-won fa-fw" aria-hidden="true"></i> Currency Icons</a></li> + <li><a href="{{ page.relative_path }}icons/#text-editor"><i class="fa fa-file-text-o fa-fw" aria-hidden="true"></i> Text Editor Icons</a></li> + <li><a href="{{ page.relative_path }}icons/#directional"><i class="fa fa-arrow-right fa-fw" aria-hidden="true"></i> Directional Icons</a></li> + <li><a href="{{ page.relative_path }}icons/#video-player"><i class="fa fa-play-circle fa-fw" aria-hidden="true"></i> Video Player Icons</a></li> + <li><a href="{{ page.relative_path }}icons/#brand"><i class="fa fa-facebook-official fa-fw" aria-hidden="true"></i> Brand Icons</a></li> + <li><a href="{{ page.relative_path }}icons/#medical"><i class="fa fa-medkit fa-fw" aria-hidden="true"></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" aria-hidden="true" title="Toggle dropdown menu"></i> + <span class="sr-only">Toggle dropdown menu</span> + <span class="toggle drop down"></span> + </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/#accessible">Accessibility-Minded</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 class="hidden-sm{% if page.navbar_active == "accessibility" %} active{% endif %}"><a href="{{ page.relative_path }}accessibility/">Accessibility</a></li> + <li class="hidden-xs hidden-md hidden-lg{% if page.navbar_active == "accessibility" %} active{% endif %}"><a href="{{ page.relative_path }}accessibility/"><i class="fa fa-universal-access"></i></a></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> + </div> + </div> +</div> diff --git a/static/fork-awesome/src/doc/_includes/new-features.html b/static/fork-awesome/src/doc/_includes/new-features.html new file mode 100644 index 0000000..7f18999 --- /dev/null +++ b/static/fork-awesome/src/doc/_includes/new-features.html @@ -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" aria-hidden="true"></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" aria-hidden="true"></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" aria-hidden="true"></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" aria-hidden="true"></i> Bootstrap 3</h4> + {{ site.forkawesome.name }} {{ site.forkawesome.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" aria-hidden="true"></i> Better Compatibility</h4> + {{ site.forkawesome.name }}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" aria-hidden="true"></i> {{ icons | version:site.forkawesome.minor_version | size }} New Icons in {{ site.fontawesome.minor_version }}</h4> + Requested by the active community on the <a href="{{ site.forkawesome.github.url }}">{{ site.forkawesome.name }} GitHub project</a>. + </div> + </div> +</section> diff --git a/static/fork-awesome/src/doc/_includes/new-naming.html b/static/fork-awesome/src/doc/_includes/new-naming.html new file mode 100644 index 0000000..0a0a481 --- /dev/null +++ b/static/fork-awesome/src/doc/_includes/new-naming.html @@ -0,0 +1,157 @@ +<section id="new-naming"> + <h2 class="page-header">New Naming Conventions in {{ site.forkawesome.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" aria-hidden="true"></i> + fa-bookmark + </li> + <li> + <i class="fa fa-comment fa-li" aria-hidden="true"></i> + fa-comment + </li> + <li> + <i class="fa fa-folder fa-li" aria-hidden="true"></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" aria-hidden="true"></i> + fa-bookmark-o + </li> + <li> + <i class="fa fa-comment-o fa-li" aria-hidden="true"></i> + fa-comment-o + </li> + <li> + <i class="fa fa-folder-o fa-li" aria-hidden="true"></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" aria-hidden="true"></i> + fa-check-circle + </li> + <li> + <i class="fa fa-exclamation-circle fa-li" aria-hidden="true"></i> + fa-exclamation-circle + </li> + <li> + <i class="fa fa-plus-circle fa-li" aria-hidden="true"></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" aria-hidden="true"></i> + fa-check-square + </li> + <li> + <i class="fa fa-twitter-square fa-li" aria-hidden="true"></i> + fa-twitter-square + </li> + <li> + <i class="fa fa-plus-square fa-li" aria-hidden="true"></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" aria-hidden="true"></i> + fa-arrow-right + </li> + <li> + <i class="fa fa-arrow-circle-right fa-li" aria-hidden="true"></i> + fa-arrow-circle-right + </li> + <li> + <i class="fa fa-angle-double-right fa-li" aria-hidden="true"></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" aria-hidden="true"></i> + fa-unlock-alt + </li> + <li> + <i class="fa fa-list-alt fa-li" aria-hidden="true"></i> + fa-list-alt + </li> + <li> + <i class="fa fa-github-alt fa-li" aria-hidden="true"></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" aria-hidden="true"></i> + fa-arrows-v + </li> + <li> + <i class="fa fa-arrows-h fa-li" aria-hidden="true"></i> + fa-arrows-h + </li> + <li> + <i class="fa fa-ellipsis-v fa-li" aria-hidden="true"></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&helip;</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" aria-hidden="true"></i> + fa-arrow-circle-o-right + </li> + <li> + <i class="fa fa-caret-square-o-right fa-li" aria-hidden="true"></i> + fa-caret-square-o-right + </li> + <li> + <i class="fa fa-hand-o-right fa-li" aria-hidden="true"></i> + fa-hand-o-right + </li> + </ul> + </div> + + </div> + +</section> diff --git a/static/fork-awesome/src/doc/_includes/new-upgrading.html b/static/fork-awesome/src/doc/_includes/new-upgrading.html new file mode 100644 index 0000000..0bcabc3 --- /dev/null +++ b/static/fork-awesome/src/doc/_includes/new-upgrading.html @@ -0,0 +1,13 @@ +<section id="new-upgrading"> + <h2 class="page-header">Switching from {{ site.fontawesome.name }} {{ site.fontawesome.minor_version }}?</h2> + <p> + If you were using {{ site.fontawesome.name }} {{ site.fontawesome.minor_version }}, you should be able to just switch to {{ site.forkawesome.name }} {{ site.forkawesome.minor_version }} and get all the benefits from it. + If you were using npm or composer packages, replace the ones you were using by this {{ site.forkawesome.name }} ones. Or if you downloaded a static copy of {{ site.fontawesome.name }}, download the latest version of {{ site.forkawesome.name }} and + replace CSS and font files in your project and you should be good to go. + </p> + <p> + We paid special attention not to change unicode codepoints for the existing icons, nor changed the CSS class names or icon names from {{ site.fontawesome.name }} {{ site.fontawesome.minor_version }}. + Though we added a few more icons and made the process of contributing to this project much easier. + Though, if you see a mistake, please don't hesitate to <a href="{{ page.relative_path }}community/#reporting-bugs">file a bug</a>. + </p> +</section> diff --git a/static/fork-awesome/src/doc/_includes/products/camera-retro-tee.html b/static/fork-awesome/src/doc/_includes/products/camera-retro-tee.html new file mode 100644 index 0000000..4f6ff4d --- /dev/null +++ b/static/fork-awesome/src/doc/_includes/products/camera-retro-tee.html @@ -0,0 +1,31 @@ +<a class="product" href="http://www.amazon.com/Camera-Retro-T-shirt-Small-Asphalt/dp/B01ELWGV14"> + <div class="product-sizes"> + <span class="sr-only">Available in the following sizes: </span> + <i class="fa fa-male" title="Men"></i> + <i class="fa fa-female" title="Women"></i> + <i class="fa fa-child" title="Kids"></i> + </div> + <div class="tab-content"> + <div class="tab-pane active" id="camera-asphalt"> + <img src="http://ecx.images-amazon.com/images/I/81mzUUTrfYL._UX679_.jpg"> + </div> + <div class="tab-pane" id="camera-kelly-green"> + <img src="http://ecx.images-amazon.com/images/I/81AihmIpmUL._UX679_.jpg"> + </div> + </div> + + <ul class="list-inline text-center margin-bottom-0"> + <li class="active"><span data-target="#camera-asphalt" data-toggle="tab"><span class="swatch swatch-asphalt" title="Asphalt"></span><span class="sr-only"> Asphalt</span></span></li> + <li><span data-target="#camera-kelly-green" data-toggle="tab"><span class="swatch swatch-kellygreen" title="Kelly Green"></span> <span class="sr-only"> Kelly Green</span></span></li> + </ul> + + <hr /> + + <div class="gg margin-bottom-sm"> + <h3 class="gg-col product-title margin-top-0 margin-bottom-0 padding-right-sm">Camera Retro Tee</h3> + <h3 class="gg-col text-right text-success margin-top-0 margin-bottom-0">$28</h3> + </div> + <div class="text-muted"> + American Apparel Fine Jersey Short Sleeve T-Shirt + </div> +</a> diff --git a/static/fork-awesome/src/doc/_includes/products/classics-tee.html b/static/fork-awesome/src/doc/_includes/products/classics-tee.html new file mode 100644 index 0000000..458f34a --- /dev/null +++ b/static/fork-awesome/src/doc/_includes/products/classics-tee.html @@ -0,0 +1,31 @@ +<a class="product" href="http://www.amazon.com/Mens-Classics-T-shirt-Small-Navy/dp/B01ELY5MT4"> + <div class="product-sizes"> + <span class="sr-only">Available in the following sizes: </span> + <i class="fa fa-male" title="Men"></i> + <i class="fa fa-female" title="Women"></i> + <i class="fa fa-child" title="Kids"></i> + </div> + <div class="tab-content"> + <div class="tab-pane active" id="classics-kelly-green"> + <img src="http://ecx.images-amazon.com/images/I/81nYbDVxo8L._UX679_.jpg"> + </div> + <div class="tab-pane" id="classics-navy"> + <img src="http://ecx.images-amazon.com/images/I/81MMb-JjRNL._UX679_.jpg"> + </div> + </div> + + <ul class="list-inline text-center margin-bottom-0"> + <li class="active"><span data-target="#classics-kelly-green" data-toggle="tab"><span class="swatch swatch-kellygreen" title="Kelly Green"></span> <span class="sr-only"> Kelly Green</span></span></li> + <li><span data-target="#classics-navy" data-toggle="tab"><span class="swatch swatch-navy"></span><span class="sr-only" title="Navy"> Navy</span></span></li> + </ul> + + <hr /> + + <div class="gg margin-bottom-sm"> + <h3 class="gg-col product-title margin-top-0 margin-bottom-0 padding-right-sm">Classics Tee</h3> + <h3 class="gg-col text-right text-success margin-top-0 margin-bottom-0">$28</h3> + </div> + <div class="text-muted"> + American Apparel Fine Jersey Short Sleeve T-Shirt + </div> +</a> diff --git a/static/fork-awesome/src/doc/_includes/products/cta-suggestions.html b/static/fork-awesome/src/doc/_includes/products/cta-suggestions.html new file mode 100644 index 0000000..09f703c --- /dev/null +++ b/static/fork-awesome/src/doc/_includes/products/cta-suggestions.html @@ -0,0 +1,20 @@ +<div class="product-cta"> + <h3 class="cta-title">Have Ideas or Requests?</h3> + + <div class="cta-content"> + <p> + Got a great idea for a Font Awesome goodie or shirt? Don't see your favorite icon in a wear-able or share-able format? + </p> + + <p> + We're all ears! Spend a few minutes and let us know what you'd want. If we end up using your idea, we'll send you a free copy. + </p> + </div> + + <a class="btn btn-success btn-block btn-lg" href="mailto:suggestions@fortawesome.com?subject=I have a store idea!">Make a Store Suggestion!</a> + + + <p class="text-muted cta-fine-print"> + Please note: While we appreciate all suggestions, not every idea might be right for Font Awesome nor could we physically make every idea. + </p> +</div> diff --git a/static/fork-awesome/src/doc/_includes/products/fa-ther-tee.html b/static/fork-awesome/src/doc/_includes/products/fa-ther-tee.html new file mode 100644 index 0000000..7699d6b --- /dev/null +++ b/static/fork-awesome/src/doc/_includes/products/fa-ther-tee.html @@ -0,0 +1,29 @@ +<a class="product" href="http://www.amazon.com/Father-T-shirt-Small-Kelly-Green/dp/B01ELXTKW0"> + <div class="product-sizes"> + <span class="sr-only">Available in the following sizes: </span> + <i class="fa fa-male" title="Men"></i> + </div> + <div class="tab-content"> + <div class="tab-pane active" id="father-kelly-green"> + <img src="http://ecx.images-amazon.com/images/I/81QUekkdt7L._UX679_.jpg"> + </div> + <div class="tab-pane" id="father-navy"> + <img src="http://ecx.images-amazon.com/images/I/817wsSl9ScL._UX679_.jpg"> + </div> + </div> + + <ul class="list-inline text-center margin-bottom-0"> + <li class="active"><span data-target="#father-kelly-green" data-toggle="tab"><span class="swatch swatch-kellygreen" title="Kelly Green"></span> <span class="sr-only"> Kelly Green</span></span></li> + <li><span data-target="#father-navy" data-toggle="tab"><span class="swatch swatch-navy" title="Navy"></span><span class="sr-only"> Navy</span></span></li> + </ul> + + <hr /> + + <div class="gg margin-bottom-sm"> + <h3 class="gg-col product-title margin-top-0 margin-bottom-0 padding-right-sm">Fa-ther Tee</h3> + <h3 class="gg-col text-right text-success margin-top-0 margin-bottom-0">$28</h3> + </div> + <div class="text-muted"> + American Apparel Fine Jersey Short Sleeve T-Shirt + </div> +</a> diff --git a/static/fork-awesome/src/doc/_includes/products/green-logo-tee.html b/static/fork-awesome/src/doc/_includes/products/green-logo-tee.html new file mode 100644 index 0000000..9226a54 --- /dev/null +++ b/static/fork-awesome/src/doc/_includes/products/green-logo-tee.html @@ -0,0 +1,31 @@ +<a class="product" href="http://www.amazon.com/Mens-Schmancy-Green-Small-Black/dp/B01ELYOYY8"> + <div class="product-sizes"> + <span class="sr-only">Available in the following sizes: </span> + <i class="fa fa-male" title="Men"></i> + <i class="fa fa-female" title="Women"></i> + <i class="fa fa-child" title="Kids"></i> + </div> + <div class="tab-content"> + <div class="tab-pane active" id="green-logo-black"> + <img src="http://ecx.images-amazon.com/images/I/715simtOAGL._UX679_.jpg"> + </div> + <div class="tab-pane" id="green-logo-kelly-green"> + <img src="http://ecx.images-amazon.com/images/I/81Y2BFVgUAL._UX679_.jpg"> + </div> + </div> + + <ul class="list-inline text-center margin-bottom-0"> + <li class="active"><span data-target="#green-logo-black" data-toggle="tab"><span class="swatch swatch-navy" title="Navy"></span><span class="sr-only"> Navy</span></span></li> + <li><span data-target="#green-logo-kelly-green" data-toggle="tab"><span class="swatch swatch-kellygreen" title="Kelly Green"></span> <span class="sr-only"> Kelly Green</span></span></li> + </ul> + + <hr /> + + <div class="gg margin-bottom-sm"> + <h3 class="gg-col product-title margin-top-0 margin-bottom-0 padding-right-sm">Green Logo Tee</h3> + <h3 class="gg-col text-right text-success margin-top-0 margin-bottom-0">$28</h3> + </div> + <div class="text-muted"> + American Apparel Fine Jersey Short Sleeve T-Shirt + </div> +</a> diff --git a/static/fork-awesome/src/doc/_includes/products/old-skool-tee.html b/static/fork-awesome/src/doc/_includes/products/old-skool-tee.html new file mode 100644 index 0000000..4fff5b9 --- /dev/null +++ b/static/fork-awesome/src/doc/_includes/products/old-skool-tee.html @@ -0,0 +1,31 @@ +<a class="product" href="http://www.amazon.com/Mens-Skool-T-shirt-Small-Navy/dp/B01ELWVHJ0"> + <div class="product-sizes"> + <span class="sr-only">Available in the following sizes: </span> + <i class="fa fa-male" title="Men"></i> + <i class="fa fa-female" title="Women"></i> + <i class="fa fa-child" title="Kids"></i> + </div> + <div class="tab-content"> + <div class="tab-pane active" id="old-skool-kelly-green"> + <img src="http://ecx.images-amazon.com/images/I/812ghxTnRrL._UX679_.jpg"> + </div> + <div class="tab-pane" id="old-skool-navy"> + <img src="http://ecx.images-amazon.com/images/I/819SDvnOv8L._UX679_.jpg"> + </div> + </div> + + <ul class="list-inline text-center margin-bottom-0"> + <li class="active"><span data-target="#old-skool-kelly-green" data-toggle="tab"><span class="swatch swatch-kellygreen" title="Kelly Green"></span> <span class="sr-only"> Kelly Green</span></span></li> + <li><span data-target="#old-skool-navy" data-toggle="tab"><span class="swatch swatch-navy" title="Navy"></span><span class="sr-only"> Navy</span></span></li> + </ul> + + <hr /> + + <div class="gg margin-bottom-sm"> + <h3 class="gg-col product-title margin-top-0 margin-bottom-0 padding-right-sm">Old Skool Tee</h3> + <h3 class="gg-col text-right text-success margin-top-0 margin-bottom-0">$28</h3> + </div> + <div class="text-muted"> + American Apparel Fine Jersey Short Sleeve T-Shirt + </div> +</a> diff --git a/static/fork-awesome/src/doc/_includes/products/rock-paper-scissors-lizard-spock-tee.html b/static/fork-awesome/src/doc/_includes/products/rock-paper-scissors-lizard-spock-tee.html new file mode 100644 index 0000000..2941231 --- /dev/null +++ b/static/fork-awesome/src/doc/_includes/products/rock-paper-scissors-lizard-spock-tee.html @@ -0,0 +1,27 @@ +<a class="product" href="http://www.amazon.com/Paper-Scissors-Lizard-Spock-T-shirt/dp/B01ELX6N7U"> + <div class="product-sizes"> + <span class="sr-only">Available in the following sizes: </span> + <i class="fa fa-male" title="Men"></i> + <i class="fa fa-female" title="Women"></i> + <i class="fa fa-child" title="Kids"></i> + </div> + <div class="tab-content"> + <div class="tab-pane active" id="rpsls-blue"> + <img src="http://ecx.images-amazon.com/images/I/81AqlTK02KL._UX679_.jpg"> + </div> + </div> + + <ul class="list-inline text-center margin-bottom-0"> + <li class="active"><span data-target="#rpsls-blue" data-toggle="tab"><span class="swatch swatch-royalblue" title="Royal Blue"></span><span class="sr-only"> Royal Blue</span></span></li> + </ul> + + <hr /> + + <div class="gg margin-bottom-sm"> + <h3 class="gg-col product-title margin-top-0 margin-bottom-0 padding-right-sm">Rock Paper Scissors Lizard Spock Tee</h3> + <h3 class="gg-col text-right text-success margin-top-0 margin-bottom-0">$28</h3> + </div> + <div class="text-muted"> + American Apparel Fine Jersey Short Sleeve T-Shirt + </div> +</a> diff --git a/static/fork-awesome/src/doc/_includes/products/space-shuttle-tee.html b/static/fork-awesome/src/doc/_includes/products/space-shuttle-tee.html new file mode 100644 index 0000000..ddac553 --- /dev/null +++ b/static/fork-awesome/src/doc/_includes/products/space-shuttle-tee.html @@ -0,0 +1,31 @@ +<a class="product" href="http://www.amazon.com/Space-Shuttle-T-shirt-Small-Black/dp/B01ELRXO14"> + <div class="product-sizes"> + <span class="sr-only">Available in the following sizes: </span> + <i class="fa fa-male" title="Men"></i> + <i class="fa fa-female" title="Women"></i> + <i class="fa fa-child" title="Kids"></i> + </div> + <div class="tab-content"> + <div class="tab-pane active" id="shuttle-black"> + <img src="http://ecx.images-amazon.com/images/I/71e4BRlSOML._UX679_.jpg"> + </div> + <div class="tab-pane" id="shuttle-navy"> + <img src="http://ecx.images-amazon.com/images/I/81U%2BSAV23IL._UX679_.jpg"> + </div> + </div> + + <ul class="list-inline text-center margin-bottom-0"> + <li class="active"><span data-target="#shuttle-black" data-toggle="tab"><span class="swatch swatch-black" title="Black"></span><span class="sr-only"> Black</span></span></li> + <li><span data-target="#shuttle-navy" data-toggle="tab"><span class="swatch swatch-navy" title="Navy"></span><span class="sr-only"> Navy</span></span></li> + </ul> + + <hr /> + + <div class="gg margin-bottom-sm"> + <h3 class="gg-col product-title margin-top-0 margin-bottom-0 padding-right-sm">Space Shuttle Tee</h3> + <h3 class="gg-col text-right text-success margin-top-0 margin-bottom-0">$28</h3> + </div> + <div class="text-muted"> + American Apparel Fine Jersey Short Sleeve T-Shirt + </div> +</a> diff --git a/static/fork-awesome/src/doc/_includes/products/white-logo-tee.html b/static/fork-awesome/src/doc/_includes/products/white-logo-tee.html new file mode 100644 index 0000000..bd4ac26 --- /dev/null +++ b/static/fork-awesome/src/doc/_includes/products/white-logo-tee.html @@ -0,0 +1,35 @@ +<a class="product" href="http://www.amazon.com/Mens-Schmancy-White-T-shirt-Small/dp/B01ELYG428"> + <div class="product-sizes"> + <span class="sr-only">Available in the following sizes: </span> + <i class="fa fa-male" title="Men"></i> + <i class="fa fa-female" title="Women"></i> + <i class="fa fa-child" title="Kids"></i> + </div> + <div class="tab-content"> + <div class="tab-pane active" id="white-logo-kelly-green"> + <img src="http://ecx.images-amazon.com/images/I/81fPcfH8KkL._UX679_.jpg"> + </div> + <div class="tab-pane" id="white-logo-navy"> + <img src="http://ecx.images-amazon.com/images/I/81wt4C6gBlL._UX679_.jpg"> + </div> + <div class="tab-pane" id="white-logo-silver"> + <img src="http://ecx.images-amazon.com/images/I/71pEdMm86PL._UX679_.jpg"> + </div> + </div> + + <ul class="list-inline text-center margin-bottom-0"> + <li class="active"><span data-target="#white-logo-kelly-green" data-toggle="tab"><span class="swatch swatch-kellygreen" title="Kelly Green"></span> <span class="sr-only"> Kelly Green</span></span></li> + <li><span data-target="#white-logo-navy" data-toggle="tab"><span class="swatch swatch-navy" title="Navy"></span><span class="sr-only"> Navy</span></span></li> + <li><span data-target="#white-logo-silver" data-toggle="tab"><span class="swatch swatch-silver" title="Silver"></span><span class="sr-only"> Silver</span></span></li> + </ul> + + <hr /> + + <div class="gg margin-bottom-sm"> + <h3 class="gg-col product-title margin-top-0 margin-bottom-0">White Logo Tee</h3> + <h3 class="gg-col text-right text-success margin-top-0 margin-bottom-0">$28</h3> + </div> + <div class="text-muted"> + American Apparel Fine Jersey Short Sleeve T-Shirt + </div> +</a> diff --git a/static/fork-awesome/src/doc/_includes/stripe-social.html b/static/fork-awesome/src/doc/_includes/stripe-social.html new file mode 100644 index 0000000..6bd9d51 --- /dev/null +++ b/static/fork-awesome/src/doc/_includes/stripe-social.html @@ -0,0 +1,46 @@ +<div id="social-buttons" class="hidden-print"> + <div class="container"> + <ul class="list-inline"> + <li> + <input name="popup" id="overlay" class="overlay" type="radio"> + <span class="share"> + <label class="share-btn btn btn-xs diaspora" title="Share this page on Diaspora*" for="diaspora-share"> + <i class="fa fa-diaspora" aria-hidden="true"></i> Spread + </label> + <input name="popup" id="diaspora-share" class="hidden" type="radio"> + <span class="popup"> + <label for="overlay"></label> + <input name="podurl" value="" placeholder="Diaspora URL (joindiaspora.con)" type="text"><button class="share-btn" type="submit" value="diaspora">OK</button> + </span> + </span> + </li> + <li> + <input name="popup" id="overlay" class="overlay" type="radio"> + <span class="share"> + <label class="share-btn btn btn-xs mastodon" title="Share this page on Mastodon" for="mastodon-share"> + <i class="fa fa-mastodon" aria-hidden="true"></i> Toot + </label> + <input name="popup" id="mastodon-share" class="hidden" type="radio"> + <span class="popup"> + <label for="overlay"></label> + <input name="podurl" value="" placeholder="Mastodon URL (mastodon.social)" type="text"><button class="share-btn" type="submit" value="mastodon">OK</button> + </span> + </span> + </li> + <li> + <span class="share"> + <a + class="btn btn-xs twitter" + href="https://twitter.com/intent/tweet?url={{ site.forkawesome.url | cgi_escape }}&text={{ site.forkawesome.name | cgi_escape }}%20{{ site.forkawesome.tagline | cgi_escape }}&hashtags=forkawesome,iconfont" + target="_blank" + > + <i class="fa fa-twitter" aria-hidden="true"></i> Tweet + </a> + </span> + </li> + <li class="github-btn"> + <iframe src="https://ghbtns.com/github-btn.html?user=ForkAwesome&repo=Fork-Awesome&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe> + </li> + </ul> + </div> +</div> diff --git a/static/fork-awesome/src/doc/_includes/tests/rotated-flipped-inside-anchor.html b/static/fork-awesome/src/doc/_includes/tests/rotated-flipped-inside-anchor.html new file mode 100644 index 0000000..2c48c0e --- /dev/null +++ b/static/fork-awesome/src/doc/_includes/tests/rotated-flipped-inside-anchor.html @@ -0,0 +1,6 @@ +<a href="#"><i class="fa fa-flag" aria-hidden="true"></i> normal</a><br> +<a href="#"><i class="fa fa-flag fa-rotate-90" aria-hidden="true"></i> fa-rotate-90</a><br> +<a href="#"><i class="fa fa-flag fa-rotate-180" aria-hidden="true"></i> fa-rotate-180</a><br> +<a href="#"><i class="fa fa-flag fa-rotate-270" aria-hidden="true"></i> fa-rotate-270</a><br> +<a href="#"><i class="fa fa-flag fa-flip-horizontal" aria-hidden="true"></i> fa-flip-horizontal</a><br> +<a href="#"><i class="fa fa-flag fa-flip-vertical" aria-hidden="true"></i> fa-flip-vertical</a> diff --git a/static/fork-awesome/src/doc/_includes/tests/rotated-flipped-inside-btn.html b/static/fork-awesome/src/doc/_includes/tests/rotated-flipped-inside-btn.html new file mode 100644 index 0000000..9399fc3 --- /dev/null +++ b/static/fork-awesome/src/doc/_includes/tests/rotated-flipped-inside-btn.html @@ -0,0 +1,6 @@ +<a class="btn btn-default" href="#"><i class="fa fa-flag" aria-hidden="true"></i> normal</a><br> +<a class="btn btn-default" href="#"><i class="fa fa-flag fa-rotate-90" aria-hidden="true"></i> fa-rotate-90</a><br> +<a class="btn btn-default" href="#"><i class="fa fa-flag fa-rotate-180" aria-hidden="true"></i> fa-rotate-180</a><br> +<a class="btn btn-default" href="#"><i class="fa fa-flag fa-rotate-270" aria-hidden="true"></i> fa-rotate-270</a><br> +<a class="btn btn-default" href="#"><i class="fa fa-flag fa-flip-horizontal" aria-hidden="true"></i> fa-flip-horizontal</a><br> +<a class="btn btn-default" href="#"><i class="fa fa-flag fa-flip-vertical" aria-hidden="true"></i> fa-flip-vertical</a> diff --git a/static/fork-awesome/src/doc/_includes/tests/rotated-flipped.html b/static/fork-awesome/src/doc/_includes/tests/rotated-flipped.html new file mode 100644 index 0000000..7f12a77 --- /dev/null +++ b/static/fork-awesome/src/doc/_includes/tests/rotated-flipped.html @@ -0,0 +1,6 @@ +<i class="fa fa-flag" aria-hidden="true"></i> normal<br> +<i class="fa fa-flag fa-rotate-90" aria-hidden="true"></i> fa-rotate-90<br> +<i class="fa fa-flag fa-rotate-180" aria-hidden="true"></i> fa-rotate-180<br> +<i class="fa fa-flag fa-rotate-270" aria-hidden="true"></i> fa-rotate-270<br> +<i class="fa fa-flag fa-flip-horizontal" aria-hidden="true"></i> fa-flip-horizontal<br> +<i class="fa fa-flag fa-flip-vertical" aria-hidden="true"></i> fa-flip-vertical diff --git a/static/fork-awesome/src/doc/_includes/tests/stacked-inside-anchor.html b/static/fork-awesome/src/doc/_includes/tests/stacked-inside-anchor.html new file mode 100644 index 0000000..04a6b31 --- /dev/null +++ b/static/fork-awesome/src/doc/_includes/tests/stacked-inside-anchor.html @@ -0,0 +1,69 @@ +<p> + <a href="#"> + <span class="fa-stack" aria-hidden="true"> + <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" aria-hidden="true"> + <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" aria-hidden="true"> + <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" aria-hidden="true"> + <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" aria-hidden="true"> + <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" aria-hidden="true"> + <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" aria-hidden="true"> + <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" aria-hidden="true"> + <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" aria-hidden="true"> + <i class="fa fa-circle-o fa-stack-2x"></i> + <i class="fa fa-github fa-stack-1x"></i> + </span> + GitHub Icon + </a> +</p> diff --git a/static/fork-awesome/src/doc/_includes/tests/stacked-with-text.html b/static/fork-awesome/src/doc/_includes/tests/stacked-with-text.html new file mode 100644 index 0000000..28a7500 --- /dev/null +++ b/static/fork-awesome/src/doc/_includes/tests/stacked-with-text.html @@ -0,0 +1,4 @@ +<span class="fa-stack" aria-hidden="true"> + <i class="fa fa-calendar-o fa-stack-2x"></i> + <span class="fa-stack-1x padding-top-sm">27</span> +</span> diff --git a/static/fork-awesome/src/doc/_includes/tests/stacked.html b/static/fork-awesome/src/doc/_includes/tests/stacked.html new file mode 100644 index 0000000..4d00407 --- /dev/null +++ b/static/fork-awesome/src/doc/_includes/tests/stacked.html @@ -0,0 +1,58 @@ +<span style="border: solid 1px #d3d3d3; display: inline-block; text-align: center"> + <span class="fa-stack" aria-hidden="true"> + <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" aria-hidden="true"> + <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" aria-hidden="true"> + <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" aria-hidden="true"> + <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" aria-hidden="true"> + <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" aria-hidden="true"> + <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" aria-hidden="true"> + <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" aria-hidden="true"> + <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" aria-hidden="true"> + <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" aria-hidden="true"> + <i class="fa fa-circle-o fa-stack-2x"></i> + <i class="fa fa-github fa-stack-1x"></i> + </span> + GitHub Icon +</p> diff --git a/static/fork-awesome/src/doc/_includes/thanks-to.html b/static/fork-awesome/src/doc/_includes/thanks-to.html new file mode 100644 index 0000000..fe2232b --- /dev/null +++ b/static/fork-awesome/src/doc/_includes/thanks-to.html @@ -0,0 +1,19 @@ +<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/davegandy">@davegandy</a> for his + original work on {{ site.fontawesome.name }} and to + <a href="https://twitter.com/gtagliala">@gtagliala</a> for managing pull + requests and issues on the Font Awesome Github repo. + </p> + </div> + <div class="col-md-8 col-sm-8"> + <p> + Thanks to the still growing community of <a href="https://github.com/ForkAwesome/Fork-Awesome/blob/master/CONTRIBUTORS.md">{{ page.total_contributors }} contributors</a> who've carried this project from the early days of {{ site.fontawesome.name }} and who have joined this project since the fork. + If you feel your contribution has not been recognized. Please file an issue, we'll happily add you to the list. + </p> + </div> + </div> +</section> diff --git a/static/fork-awesome/src/doc/_includes/why.html b/static/fork-awesome/src/doc/_includes/why.html new file mode 100644 index 0000000..e95b514 --- /dev/null +++ b/static/fork-awesome/src/doc/_includes/why.html @@ -0,0 +1,42 @@ +<section id="why" class="feature-list"> + <div class="row"> + <div class="col-md-4 col-sm-6"> + <h4><i class="fa fa-fork-awesome" aria-hidden="true"></i> One Font, {{ icons | size }} Icons</h4> + In a single collection, {{ site.forkawesome.name }} is a pictographic language of web-related actions. + </div> + <div class="col-md-4 col-sm-6"> + <h4><i class="fa fa-ban" aria-hidden="true"></i> No JavaScript Required</h4> + Fewer compatibility concerns because {{ site.forkawesome.name }} doesn't require JavaScript. + </div> + <div class="col-md-4 col-sm-6"> + <h4><i class="fa fa-arrows-alt" aria-hidden="true"></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" aria-hidden="true"></i> Free, as in Speech</h4> + {{ site.forkawesome.name }} 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" aria-hidden="true"></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" aria-hidden="true"></i> Perfect on Retina Displays</h4> + {{ site.forkawesome.name }} 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" aria-hidden="true"></i> Plays Well with Others</h4> + Originally designed for <a href="{{ site.bootstrap.url }}">Bootstrap</a>, {{ site.forkawesome.name }} works great with all frameworks. + </div> + <div class="col-md-4 col-sm-6"> + <h4><i class="fa fa-desktop" aria-hidden="true"></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-wheelchair" aria-hidden="true"></i> Accessibility-minded</h4> + {{ site.forkawesome.name }} <i class="fa fa-heart" aria-hidden="true"></i><span class="sr-only">loves</span> screen readers and +<a href="{{ page.relative_path }}accessibility/">helps make your icons accessible</a> on the web. + </div> + </div> +</section> |