mirror of
https://github.com/ForkAwesome/Fork-Awesome.git
synced 2024-12-26 05:21:31 +08:00
Fixes the download modal + test pages
This commit is contained in:
Julien Deswaef
parent
5ba2db090d
commit
901b475e14
@ -5,7 +5,7 @@ Fork Awesome is a full suite of 677 pictographic icons for easy scalable vector
|
|||||||
|
|
||||||
Following concerns regarding [the development of Font Awesome](https://github.com/FortAwesome/Font-Awesome/issues/12199#issuecomment-362919956), the PR Freeze since Oct 2016 and the direction Fort Awesome is taking with the version 5.0 of their project, we are forking Font Awesome (4.7), in order to build on this incredible tool Dave Gandy has given us, while at the same time allowing this project to be run by a distributed community of contributors.
|
Following concerns regarding [the development of Font Awesome](https://github.com/FortAwesome/Font-Awesome/issues/12199#issuecomment-362919956), the PR Freeze since Oct 2016 and the direction Fort Awesome is taking with the version 5.0 of their project, we are forking Font Awesome (4.7), in order to build on this incredible tool Dave Gandy has given us, while at the same time allowing this project to be run by a distributed community of contributors.
|
||||||
|
|
||||||
A tremendous gratitude is given to the whole team behind [Font Awesome](https://fontawesome.io), and you are encouraged to support them and buy Font Awesome Pro for your project.
|
A tremendous gratitude is given to the whole team behind [Font Awesome](https://fontawesome.com), and you are encouraged to support them and buy Font Awesome Pro for your project.
|
||||||
|
|
||||||
This fork is still in its very early stage of development. Though If you wish to be part of the adventure, please start submitting patches.
|
This fork is still in its very early stage of development. Though If you wish to be part of the adventure, please start submitting patches.
|
||||||
|
|
||||||
@ -74,7 +74,7 @@ Build the project and documentation:
|
|||||||
|
|
||||||
$ npm run build
|
$ npm run build
|
||||||
|
|
||||||
Or serve it on a local server on (http://localhost:7998/Fork-Awesome/):
|
Or serve it on a local server on http://localhost:7998/Fork-Awesome/:
|
||||||
|
|
||||||
$ npm run dev
|
$ npm run dev
|
||||||
|
|
||||||
|
|||||||
@ -9,58 +9,16 @@
|
|||||||
Download
|
Download
|
||||||
</h2>
|
</h2>
|
||||||
</div>
|
</div>
|
||||||
<h3 class="bg-fa5 margin-none padding-lg text-center">
|
|
||||||
Font Awesome 5 Released!
|
|
||||||
</h3>
|
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
<div class="row margin-bottom-lg margin-top">
|
<a class="btn btn-primary btn-lg btn-block" href="{{ page.relative_path }}assets/fork-awesome-{{ site.forkawesome.version }}.zip">
|
||||||
<div class="col-md-2 col-sm-2 col-xs-2 text-right padding-right-sm">
|
{{ site.forkawesome.name }} {{ site.forkawesome.minor_version }}
|
||||||
<i class="fas fas-trophy-alt fas-3x fas-fw text-muted hidden-xs"></i>
|
|
||||||
<i class="fas fas-trophy-alt fas-2x fas-fw text-muted hidden-sm hidden-md hidden-lg"></i>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-9 col-sm-9 col-xs-9">
|
|
||||||
<h4 class="page-header margin-top-none padding-bottom-sm margin-bottom-sm">More Icons</h4>
|
|
||||||
<p>
|
|
||||||
Get 893 icons right now with FA Free, plus another 1,283 icons with Pro, which also gets you another 46 icon category packs as we finish them!
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row margin-bottom-lg">
|
|
||||||
<div class="col-md-2 col-sm-2 col-xs-2 text-right padding-right-sm">
|
|
||||||
<i class="fas fas-flask fas-3x fas-fw text-muted hidden-xs"></i>
|
|
||||||
<i class="fas fas-flask fas-2x fas-fw text-muted hidden-sm hidden-md hidden-lg"></i>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-9 col-sm-9 col-xs-9">
|
|
||||||
<h4 class="page-header margin-top-none padding-bottom-sm margin-bottom-sm">All-New SVG</h4>
|
|
||||||
<p>
|
|
||||||
Our all-new SVG with JavaScript gives you all the power of SVG without the usual hassle.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row margin-bottom-lg">
|
|
||||||
<div class="col-md-2 col-sm-2 col-xs-2 text-right padding-right-sm">
|
|
||||||
<i class="fas fas-rocket fas-3x fas-fw text-muted hidden-xs"></i>
|
|
||||||
<i class="fas fas-rocket fas-2x fas-fw text-muted hidden-sm hidden-md hidden-lg"></i>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-9 col-sm-9 col-xs-10">
|
|
||||||
<h4 class="page-header margin-top-none padding-bottom-sm margin-bottom-sm">Tons More</h4>
|
|
||||||
<p>
|
|
||||||
Ligatures for easier desktop use, shim for quick upgrades from 4, and more styles, icons, and tools with FA Pro.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<a target="_blank" href="https://fontawesome.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_campaign=fa5_released&utm_content=download_modal" class="btn btn-fa5 btn-lg btn-block">
|
|
||||||
<h3 class="margin-top margin-bottom strong">
|
|
||||||
Font Awesome 5 <i class="fas fas-external-link" aria-hidden="true"></i>
|
|
||||||
</h3>
|
|
||||||
</a>
|
</a>
|
||||||
<div class="text-center margin-top margin-bottom">or</div>
|
<div class="row margin-bottom-lg margin-top-lg">
|
||||||
<a class="btn btn-default btn-lg btn-block" href="{{ page.relative_path }}assets/font-awesome-{{ site.fontawesome.version }}.zip"
|
<div class="col-md-12 text-center">
|
||||||
onClick="_gaq.push(['_trackEvent', 'Outbound Modal Link', 'Download on GitHub']);">
|
More ways to install {{ site.forkawesome.name }} coming soon!<br/>
|
||||||
No thanks, just download <br class="visible-xs" />Font Awesome 4
|
In the meantime, don't forget to read <a href="{{ page.relative_path }}get-started">how to get started</a>.
|
||||||
</a>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,55 +0,0 @@
|
|||||||
<div class="modal" id="modal-fa5" tabindex="-1" role="dialog" aria-labelledby="modal-fa5-label">
|
|
||||||
<div class="modal-dialog" role="document">
|
|
||||||
<div class="modal-content">
|
|
||||||
<div class="modal-header bg-fa5">
|
|
||||||
<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>
|
|
||||||
<h3 class="modal-title" id="modal-fa5-label">Font Awesome 5 Released!</h3>
|
|
||||||
</div>
|
|
||||||
<div class="modal-body">
|
|
||||||
<div class="row margin-bottom-lg margin-top">
|
|
||||||
<div class="col-md-2 col-sm-2 col-xs-2 text-right padding-right-sm">
|
|
||||||
<i class="fas fas-trophy-alt fas-3x fas-fw text-muted hidden-xs"></i>
|
|
||||||
<i class="fas fas-trophy-alt fas-2x fas-fw text-muted hidden-sm hidden-md hidden-lg"></i>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-9 col-sm-9 col-xs-9">
|
|
||||||
<h4 class="page-header margin-top-none padding-bottom-sm margin-bottom-sm">More Icons</h4>
|
|
||||||
<p>
|
|
||||||
Get 893 icons right now with FA Free, plus another 1,283 icons with Pro, which also gets you another 46 icon category packs as we finish them!
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row margin-bottom-lg">
|
|
||||||
<div class="col-md-2 col-sm-2 col-xs-2 text-right padding-right-sm">
|
|
||||||
<i class="fas fas-flask fas-3x fas-fw text-muted hidden-xs"></i>
|
|
||||||
<i class="fas fas-flask fas-2x fas-fw text-muted hidden-sm hidden-md hidden-lg"></i>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-9 col-sm-9 col-xs-9">
|
|
||||||
<h4 class="page-header margin-top-none padding-bottom-sm margin-bottom-sm">All-New SVG</h4>
|
|
||||||
<p>
|
|
||||||
Our all-new SVG with JavaScript gives you all the power of SVG without the usual hassle.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row margin-bottom-lg">
|
|
||||||
<div class="col-md-2 col-sm-2 col-xs-2 text-right padding-right-sm">
|
|
||||||
<i class="fas fas-rocket fas-3x fas-fw text-muted hidden-xs"></i>
|
|
||||||
<i class="fas fas-rocket fas-2x fas-fw text-muted hidden-sm hidden-md hidden-lg"></i>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-9 col-sm-9 col-xs-10">
|
|
||||||
<h4 class="page-header margin-top-none padding-bottom-sm margin-bottom-sm">Tons More</h4>
|
|
||||||
<p>
|
|
||||||
Ligatures for easier desktop use, shim for quick upgrades from 4, and more styles, icons, and tools with FA Pro.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<a target="_blank" href="https://fontawesome.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_campaign=fa5_released&utm_content=auto_modal" class="btn btn-fa5 btn-lg btn-block">
|
|
||||||
<h3 class="margin-top margin-bottom strong">
|
|
||||||
Font Awesome 5 <i class="fas fas-external-link" aria-hidden="true"></i>
|
|
||||||
</h3>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
@ -31,7 +31,6 @@
|
|||||||
{{ content }}
|
{{ content }}
|
||||||
</div>
|
</div>
|
||||||
{% include footer.html %}
|
{% include footer.html %}
|
||||||
{% include modals/fa5.html %}
|
|
||||||
<script src="https://platform.twitter.com/widgets.js"></script>
|
<script src="https://platform.twitter.com/widgets.js"></script>
|
||||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/{{ site.jquery.version }}/jquery.min.js"></script>
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/{{ site.jquery.version }}/jquery.min.js"></script>
|
||||||
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/{{ site.jquery_validate.version }}/jquery.validate.min.js"></script>
|
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/{{ site.jquery_validate.version }}/jquery.validate.min.js"></script>
|
||||||
|
|||||||
@ -1,824 +0,0 @@
|
|||||||
---
|
|
||||||
title: Font Awesome + Bootstrap 2.3.2 Test Cases
|
|
||||||
relative_path: ../
|
|
||||||
---
|
|
||||||
|
|
||||||
|
|
||||||
<!DOCTYPE html>
|
|
||||||
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
|
|
||||||
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
|
|
||||||
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
|
|
||||||
<!--[if (gte IE 9)|!(IE)]><!-->
|
|
||||||
<html lang="en" xmlns="http://www.w3.org/1999/html"> <!--<![endif]-->
|
|
||||||
<head>
|
|
||||||
<!-- Basic Page Needs
|
|
||||||
================================================== -->
|
|
||||||
<meta charset="utf-8" />
|
|
||||||
<title>{% if page.title %}{{ page.title }}{% endif %}</title>
|
|
||||||
<meta name="description" content="Font Awesome, the iconic font designed for Bootstrap">
|
|
||||||
<meta name="author" content="Dave Gandy">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<!--<meta name="viewport" content="initial-scale=1; maximum-scale=1">-->
|
|
||||||
|
|
||||||
<!--[if lt IE 9]>
|
|
||||||
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
|
||||||
<![endif]-->
|
|
||||||
|
|
||||||
<!-- CSS
|
|
||||||
================================================== -->
|
|
||||||
|
|
||||||
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css">
|
|
||||||
<link rel="stylesheet" href="{{ page.relative_path }}assets/font-awesome/css/font-awesome.css">
|
|
||||||
<!-- Le fav and touch icons -->
|
|
||||||
<link rel="shortcut icon" href="{{ page.relative_path }}assets/ico/favicon.ico">
|
|
||||||
|
|
||||||
<script type="text/javascript" src="//use.typekit.net/wnc7ioh.js"></script>
|
|
||||||
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
var _gaq = _gaq || [];
|
|
||||||
_gaq.push(['_setAccount', 'UA-30136587-1']);
|
|
||||||
_gaq.push(['_trackPageview']);
|
|
||||||
|
|
||||||
(function() {
|
|
||||||
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
|
|
||||||
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
|
|
||||||
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
|
|
||||||
})();
|
|
||||||
</script>
|
|
||||||
</head>
|
|
||||||
<body data-spy="scroll" data-target=".navbar">
|
|
||||||
<div class="wrapper"> <!-- necessary for sticky footer. wrap all content except footer -->
|
|
||||||
|
|
||||||
<section class="container">
|
|
||||||
<h1 class="page-header">Visual Test Cases</h1>
|
|
||||||
|
|
||||||
<h3>Icons <small>Icons should have proper alignment and not be clipped</small></h3>
|
|
||||||
<div class="row-fluid">
|
|
||||||
<div class="span3">
|
|
||||||
<div class="well">
|
|
||||||
<i class="fa fa-building-o"></i> Building
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="span3">
|
|
||||||
<div class="well">
|
|
||||||
<i class="fa fa-building-o fa-lg"></i> Building Large
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="span3">
|
|
||||||
<i class="fa fa-building-o"></i> Building
|
|
||||||
</div>
|
|
||||||
<div class="span3">
|
|
||||||
<i class="fa fa-building-o fa-lg"></i> Building Large
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row-fluid" style="font-size: 24px; line-height: 1.5em;">
|
|
||||||
<div class="span4">
|
|
||||||
<div class="well">
|
|
||||||
<i class="fa fa-building-o"></i> Building
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="span4">
|
|
||||||
<div class="well">
|
|
||||||
<i class="fa fa-building-o fa-lg"></i> Building Large
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="span4">
|
|
||||||
<i class="fa fa-building-o fa-lg"></i> Building Large
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row-fluid">
|
|
||||||
<div class="span3">
|
|
||||||
<div class="well">
|
|
||||||
<i class="fa fa-circle"></i> Circle
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="span3">
|
|
||||||
<div class="well">
|
|
||||||
<i class="fa fa-circle fa-lg"></i> Circle Large
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="span3">
|
|
||||||
<i class="fa fa-circle"></i> Circle
|
|
||||||
</div>
|
|
||||||
<div class="span3">
|
|
||||||
<i class="fa fa-circle fa-lg"></i> Circle Large
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row-fluid" style="font-size: 24px; line-height: 1.5em;">
|
|
||||||
<div class="span4">
|
|
||||||
<div class="well">
|
|
||||||
<i class="fa fa-circle"></i> Circle
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="span4">
|
|
||||||
<div class="well">
|
|
||||||
<i class="fa fa-circle fa-lg"></i> Circle Large
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="span4">
|
|
||||||
<i class="fa fa-circle fa-lg"></i> Circle Large
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<h3>Links with Icons <small>icon should activate link & NOT underline</small></h3>
|
|
||||||
<div class="row-fluid lead">
|
|
||||||
<div class="span2">
|
|
||||||
<a href="#"><i class="fa fa-building-o padding-right"></i> Link Here</a>
|
|
||||||
</div>
|
|
||||||
<div class="span2">
|
|
||||||
<a href="#"><i class="fa fa-building-o fa-lg padding-right"></i> Link Here</a>
|
|
||||||
</div>
|
|
||||||
<div class="span2">
|
|
||||||
<a href="#"><i class="fa fa-caret-down padding-right"></i> Link Here</a>
|
|
||||||
</div>
|
|
||||||
<div class="span2">
|
|
||||||
<a href="#">Link Here <i class="fa fa-angle-double-right padding-left"></i></a>
|
|
||||||
</div>
|
|
||||||
<div class="span2">
|
|
||||||
<a href="#">Link Here <i class="fa fa-angle-double-right fa-lg padding-left"></i></a>
|
|
||||||
</div>
|
|
||||||
<div class="span2">
|
|
||||||
<a href="#">Link Here <i class="fa fa-caret-down padding-left"></i></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row-fluid">
|
|
||||||
<div class="span2">
|
|
||||||
<a href="#"><i class="fa fa-building-o padding-right-sm"></i> Link Here</a>
|
|
||||||
</div>
|
|
||||||
<div class="span2">
|
|
||||||
<a href="#"><i class="fa fa-building-o fa-lg padding-right-sm"></i> Link Here</a>
|
|
||||||
</div>
|
|
||||||
<div class="span2">
|
|
||||||
<a href="#"><i class="fa fa-caret-down padding-right-sm"></i> Link Here</a>
|
|
||||||
</div>
|
|
||||||
<div class="span2">
|
|
||||||
<a href="#">Link Here <i class="fa fa-angle-double-right padding-left-sm"></i></a>
|
|
||||||
</div>
|
|
||||||
<div class="span2">
|
|
||||||
<a href="#">Link Here <i class="fa fa-angle-double-right fa-lg padding-left-sm"></i></a>
|
|
||||||
</div>
|
|
||||||
<div class="span2">
|
|
||||||
<a href="#">Link Here <i class="fa fa-caret-down padding-left-sm"></i></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<h3>Navbar <small>should stay same height </small></h3>
|
|
||||||
<div class="navbar navbar-inverse navbar-static-top">
|
|
||||||
<div class="navbar-inner">
|
|
||||||
<div class="container">
|
|
||||||
<a class="brand" href="#"><i class="fa fa-flag"></i> Font Awesome</a>
|
|
||||||
<ul class="nav">
|
|
||||||
<li style="border: solid 1px white;"><a href="#">Nav Item 1</a></li>
|
|
||||||
<li class="dropdown" style="border: solid 1px white;">
|
|
||||||
<a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
|
|
||||||
Nav Item 2
|
|
||||||
<i class="fa fa-caret-down"></i>
|
|
||||||
</a>
|
|
||||||
<ul class="dropdown-menu" role="menu">
|
|
||||||
<li><a href="#"><i class="fa fa-building-o"></i> Menu Item 1</a></li>
|
|
||||||
<li><a href="#"><i class="fa fa-building-o fa fa-lg"></i> Menu Item 2</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li style="border: solid 1px white;"><a href="#examples"><i class="fa fa-building-o fa fa-lg"></i> Nav Item 3</a></li>
|
|
||||||
<li style="border: solid 1px white;"><a href="#examples"><i class="fa fa-envelope-o"></i> Nav Item 4</a></li>
|
|
||||||
<li style="border: solid 1px white;"><a href="#examples"><i class="fa fa-circle fa fa-lg"></i> Nav Item 5</a></li>
|
|
||||||
<li style="border: solid 1px white;"><a href="#examples"><i class="fa fa-circle"></i> Nav Item 6</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<h3>Plain buttons next to buttons w/icons <small>should be same height, icons not clipped</small></h3>
|
|
||||||
<h4>Buttons</h4>
|
|
||||||
<div class="row-fluid">
|
|
||||||
<div class="span6">
|
|
||||||
<div style="border: solid 1px #d3d3d3; text-align: center;">
|
|
||||||
<div>
|
|
||||||
<button class="btn btn-default btn-mini">Button</button>
|
|
||||||
<button class="btn btn-default btn-mini"><i class="fa fa-building-o"></i> Button</button>
|
|
||||||
<button class="btn btn-default btn-mini"><i class="fa fa-building-o"></i></button>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<button class="btn btn-default btn-small">Button</button>
|
|
||||||
<button class="btn btn-default btn-small"><i class="fa fa-building-o"></i> Button</button>
|
|
||||||
<button class="btn btn-default btn-small"><i class="fa fa-building-o"></i></button>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<button class="btn btn-default">Button</button>
|
|
||||||
<button class="btn btn-default"><i class="fa fa-building-o"></i> Button</button>
|
|
||||||
<button class="btn btn-default"><i class="fa fa-building-o"></i></button>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<button class="btn btn-default btn-large">Button</button>
|
|
||||||
<button class="btn btn-default btn-large"><i class="fa fa-building-o"></i> Button</button>
|
|
||||||
<button class="btn btn-default btn-large"><i class="fa fa-building-o"></i></button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="span6">
|
|
||||||
<div style="border: solid 1px #d3d3d3; text-align: center;">
|
|
||||||
<div>
|
|
||||||
<button class="btn btn-default btn-mini">Button</button>
|
|
||||||
<button class="btn btn-default btn-mini"><i class="fa fa-building-o fa-lg"></i> Button</button>
|
|
||||||
<button class="btn btn-default btn-mini"><i class="fa fa-building-o fa-lg"></i></button>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<button class="btn btn-default btn-small">Button</button>
|
|
||||||
<button class="btn btn-default btn-small"><i class="fa fa-building-o fa-lg"></i> Button</button>
|
|
||||||
<button class="btn btn-default btn-small"><i class="fa fa-building-o fa-lg"></i></button>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<button class="btn btn-default">Button</button>
|
|
||||||
<button class="btn btn-default"><i class="fa fa-building-o fa-lg"></i> Button</button>
|
|
||||||
<button class="btn btn-default"><i class="fa fa-building-o fa-lg"></i></button>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<button class="btn btn-default btn-large">Button</button>
|
|
||||||
<button class="btn btn-default btn-large"><i class="fa fa-building-o fa-lg"></i> Button</button>
|
|
||||||
<button class="btn btn-default btn-large"><i class="fa fa-building-o fa-lg"></i></button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row-fluid">
|
|
||||||
<div class="span6">
|
|
||||||
<div style="border: solid 1px #d3d3d3; text-align: center;">
|
|
||||||
<div>
|
|
||||||
<button class="btn btn-default btn-mini">Button</button>
|
|
||||||
<button class="btn btn-default btn-mini"><i class="fa fa-circle"></i> Button</button>
|
|
||||||
<button class="btn btn-default btn-mini"><i class="fa fa-circle"></i></button>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<button class="btn btn-default btn-small">Button</button>
|
|
||||||
<button class="btn btn-default btn-small"><i class="fa fa-circle"></i> Button</button>
|
|
||||||
<button class="btn btn-default btn-small"><i class="fa fa-circle"></i></button>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<button class="btn btn-default">Button</button>
|
|
||||||
<button class="btn btn-default"><i class="fa fa-circle"></i> Button</button>
|
|
||||||
<button class="btn btn-default"><i class="fa fa-circle"></i></button>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<button class="btn btn-default btn-large">Button</button>
|
|
||||||
<button class="btn btn-default btn-large"><i class="fa fa-circle"></i> Button</button>
|
|
||||||
<button class="btn btn-default btn-large"><i class="fa fa-circle"></i></button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="span6">
|
|
||||||
<div style="border: solid 1px #d3d3d3; text-align: center;">
|
|
||||||
<div>
|
|
||||||
<button class="btn btn-default btn-mini">Button</button>
|
|
||||||
<button class="btn btn-default btn-mini"><i class="fa fa-circle fa-lg"></i> Button</button>
|
|
||||||
<button class="btn btn-default btn-mini"><i class="fa fa-circle fa-lg"></i></button>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<button class="btn btn-default btn-small">Button</button>
|
|
||||||
<button class="btn btn-default btn-small"><i class="fa fa-circle fa-lg"></i> Button</button>
|
|
||||||
<button class="btn btn-default btn-small"><i class="fa fa-circle fa-lg"></i></button>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<button class="btn btn-default">Button</button>
|
|
||||||
<button class="btn btn-default"><i class="fa fa-circle fa-lg"></i> Button</button>
|
|
||||||
<button class="btn btn-default"><i class="fa fa-circle fa-lg"></i></button>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<button class="btn btn-default btn-large">Button</button>
|
|
||||||
<button class="btn btn-default btn-large"><i class="fa fa-circle fa-lg"></i> Button</button>
|
|
||||||
<button class="btn btn-default btn-large"><i class="fa fa-circle fa-lg"></i></button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<h4>Anchors</h4>
|
|
||||||
<div class="row-fluid">
|
|
||||||
<div class="span6">
|
|
||||||
<div style="border: solid 1px #d3d3d3; text-align: center;">
|
|
||||||
<div>
|
|
||||||
<a class="btn btn-default btn-mini">Button</a>
|
|
||||||
<a class="btn btn-default btn-mini"><i class="fa fa-building-o"></i> Button</a>
|
|
||||||
<a class="btn btn-default btn-mini"><i class="fa fa-building-o"></i></a>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<a class="btn btn-default btn-small">Button</a>
|
|
||||||
<a class="btn btn-default btn-small"><i class="fa fa-building-o"></i> Button</a>
|
|
||||||
<a class="btn btn-default btn-small"><i class="fa fa-building-o"></i></a>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<a class="btn btn-default">Button</a>
|
|
||||||
<a class="btn btn-default"><i class="fa fa-building-o"></i> Button</a>
|
|
||||||
<a class="btn btn-default"><i class="fa fa-building-o"></i></a>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<a class="btn btn-default btn-large">Button</a>
|
|
||||||
<a class="btn btn-default btn-large"><i class="fa fa-building-o"></i> Button</a>
|
|
||||||
<a class="btn btn-default btn-large"><i class="fa fa-building-o"></i></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="span6">
|
|
||||||
<div style="border: solid 1px #d3d3d3; text-align: center;">
|
|
||||||
<div>
|
|
||||||
<a class="btn btn-default btn-mini">Button</a>
|
|
||||||
<a class="btn btn-default btn-mini"><i class="fa fa-building-o fa-lg"></i> Button</a>
|
|
||||||
<a class="btn btn-default btn-mini"><i class="fa fa-building-o fa-lg"></i></a>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<a class="btn btn-default btn-small">Button</a>
|
|
||||||
<a class="btn btn-default btn-small"><i class="fa fa-building-o fa-lg"></i> Button</a>
|
|
||||||
<a class="btn btn-default btn-small"><i class="fa fa-building-o fa-lg"></i></a>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<a class="btn btn-default">Button</a>
|
|
||||||
<a class="btn btn-default"><i class="fa fa-building-o fa-lg"></i> Button</a>
|
|
||||||
<a class="btn btn-default"><i class="fa fa-building-o fa-lg"></i></a>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<a class="btn btn-default btn-large">Button</a>
|
|
||||||
<a class="btn btn-default btn-large"><i class="fa fa-building-o fa-lg"></i> Button</a>
|
|
||||||
<a class="btn btn-default btn-large"><i class="fa fa-building-o fa-lg"></i></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row-fluid">
|
|
||||||
<div class="span6">
|
|
||||||
<div style="border: solid 1px #d3d3d3; text-align: center;">
|
|
||||||
<div>
|
|
||||||
<a class="btn btn-default btn-mini">Button</a>
|
|
||||||
<a class="btn btn-default btn-mini"><i class="fa fa-circle"></i> Button</a>
|
|
||||||
<a class="btn btn-default btn-mini"><i class="fa fa-circle"></i></a>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<a class="btn btn-default btn-small">Button</a>
|
|
||||||
<a class="btn btn-default btn-small"><i class="fa fa-circle"></i> Button</a>
|
|
||||||
<a class="btn btn-default btn-small"><i class="fa fa-circle"></i></a>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<a class="btn btn-default">Button</a>
|
|
||||||
<a class="btn btn-default"><i class="fa fa-circle"></i> Button</a>
|
|
||||||
<a class="btn btn-default"><i class="fa fa-circle"></i></a>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<a class="btn btn-default btn-large">Button</a>
|
|
||||||
<a class="btn btn-default btn-large"><i class="fa fa-circle"></i> Button</a>
|
|
||||||
<a class="btn btn-default btn-large"><i class="fa fa-circle"></i></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="span6">
|
|
||||||
<div style="border: solid 1px #d3d3d3; text-align: center;">
|
|
||||||
<div>
|
|
||||||
<a class="btn btn-default btn-mini">Button</a>
|
|
||||||
<a class="btn btn-default btn-mini"><i class="fa fa-circle fa-lg"></i> Button</a>
|
|
||||||
<a class="btn btn-default btn-mini"><i class="fa fa-circle fa-lg"></i></a>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<a class="btn btn-default btn-small">Button</a>
|
|
||||||
<a class="btn btn-default btn-small"><i class="fa fa-circle fa-lg"></i> Button</a>
|
|
||||||
<a class="btn btn-default btn-small"><i class="fa fa-circle fa-lg"></i></a>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<a class="btn btn-default">Button</a>
|
|
||||||
<a class="btn btn-default"><i class="fa fa-circle fa-lg"></i> Button</a>
|
|
||||||
<a class="btn btn-default"><i class="fa fa-circle fa-lg"></i></a>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<a class="btn btn-default btn-large">Button</a>
|
|
||||||
<a class="btn btn-default btn-large"><i class="fa fa-circle fa-lg"></i> Button</a>
|
|
||||||
<a class="btn btn-default btn-large"><i class="fa fa-circle fa-lg"></i></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h3>Button groups <small>should be same height</small></h3>
|
|
||||||
<div class="row-fluid">
|
|
||||||
<div class="span4">
|
|
||||||
<div style="border: solid 1px #d3d3d3;">
|
|
||||||
<div class="btn-group">
|
|
||||||
<button class="btn btn-default btn-large">
|
|
||||||
<i class="fa fa-adjust"></i>
|
|
||||||
</button>
|
|
||||||
<button class="btn btn-default btn-large">
|
|
||||||
Text
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="span4">
|
|
||||||
<div style="border: solid 1px #d3d3d3;">
|
|
||||||
<div class="btn-group">
|
|
||||||
<button class="btn btn-default">
|
|
||||||
<i class="fa fa-adjust"></i>
|
|
||||||
</button>
|
|
||||||
<button class="btn btn-default">
|
|
||||||
Text
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="span4">
|
|
||||||
<div style="border: solid 1px #d3d3d3;">
|
|
||||||
<div class="btn-group">
|
|
||||||
<button class="btn btn-default btn-small">
|
|
||||||
<i class="fa fa-adjust"></i>
|
|
||||||
</button>
|
|
||||||
<button class="btn btn-default btn-small">
|
|
||||||
Text
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h3>Buttons with pulled 2x, 3x, 4x <small>should be same height, have correct line height</small></h3>
|
|
||||||
<div class="row-fluid">
|
|
||||||
<div class="span4">
|
|
||||||
<div style="border: solid 1px #d3d3d3;">
|
|
||||||
<a class="btn btn-default btn-large" href="#">
|
|
||||||
<i class="fa fa-github fa-2x pull-left"></i>
|
|
||||||
Longer<br>Button</a>
|
|
||||||
<a class="btn btn-default btn-large" href="#">
|
|
||||||
Longer<br>Button</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="span4">
|
|
||||||
<div style="border: solid 1px #d3d3d3;">
|
|
||||||
<a class="btn btn-default" href="#">
|
|
||||||
<i class="fa fa-github fa-2x pull-left"></i>
|
|
||||||
Longer<br>Button</a>
|
|
||||||
<a class="btn btn-default" href="#">
|
|
||||||
Longer<br>Button</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="span4">
|
|
||||||
<div style="border: solid 1px #d3d3d3;">
|
|
||||||
<a class="btn btn-default btn-small" href="#">
|
|
||||||
<i class="fa fa-github fa-2x pull-left"></i>
|
|
||||||
Longer<br>Button</a>
|
|
||||||
<a class="btn btn-default btn-small" href="#">
|
|
||||||
Longer<br>Button</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<h3>Nav pills & nav tabs <small>should be same height and properly vertically aligned</small></h3>
|
|
||||||
<div class="row-fluid">
|
|
||||||
<div class="span9">
|
|
||||||
<ul class="nav nav-pills" style="border: solid 1px #d3d3d3;">
|
|
||||||
<li class="active"><a href="#">Nav Item 1</a></li>
|
|
||||||
<li class="dropdown active">
|
|
||||||
<a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
|
|
||||||
Nav Item 2
|
|
||||||
<i class="fa fa-caret-down"></i>
|
|
||||||
</a>
|
|
||||||
<ul class="dropdown-menu" role="menu">
|
|
||||||
<li><a href="#"><i class="fa fa-building-o"></i> Menu Item 1</a></li>
|
|
||||||
<li><a href="#"><i class="fa fa-building-o fa-lg"></i> Menu Item 2</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li class="dropdown active">
|
|
||||||
<a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
|
|
||||||
Nav Item 3
|
|
||||||
<i class="fa fa-caret-down"></i>
|
|
||||||
</a>
|
|
||||||
<ul class="dropdown-menu" role="menu">
|
|
||||||
<li><a href="#"><i class="fa fa-building-o"></i> Menu Item 1</a></li>
|
|
||||||
<li><a href="#"><i class="fa fa-building-o fa-lg"></i> Menu Item 2</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li class="active"><a href="#examples"><i class="fa fa-building-o fa-lg"></i> Nav Item 4</a></li>
|
|
||||||
<li class="active"><a href="#examples"><i class="fa fa-spinner fa-spin"></i> Nav Item 5</a></li>
|
|
||||||
<li class="active"><a href="#examples"><i class="fa fa-circle fa-lg"></i> Nav Item 6</a></li>
|
|
||||||
<li class="active"><a href="#examples"><i class="fa fa-circle"></i> Nav Item 7</a></li>
|
|
||||||
</ul>
|
|
||||||
<ul class="nav nav-tabs">
|
|
||||||
<li class="active"><a href="#">Nav Item 1</a></li>
|
|
||||||
<li class="dropdown active">
|
|
||||||
<a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
|
|
||||||
Nav Item 2
|
|
||||||
<i class="fa fa-caret-down"></i>
|
|
||||||
</a>
|
|
||||||
<ul class="dropdown-menu" role="menu">
|
|
||||||
<li><a href="#"><i class="fa fa-building-o"></i> Menu Item 1</a></li>
|
|
||||||
<li><a href="#"><i class="fa fa-building-o fa-lg"></i> Menu Item 2</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li class="dropdown active">
|
|
||||||
<a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
|
|
||||||
Nav Item 3
|
|
||||||
<i class="fa fa-caret-down"></i>
|
|
||||||
</a>
|
|
||||||
<ul class="dropdown-menu" role="menu">
|
|
||||||
<li><a href="#"><i class="fa fa-building-o"></i> Menu Item 1</a></li>
|
|
||||||
<li><a href="#"><i class="fa fa-building-o fa-lg"></i> Menu Item 2</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li class="active"><a href="#examples"><i class="fa fa-building-o fa-lg"></i> Nav Item 4</a></li>
|
|
||||||
<li class="active"><a href="#examples"><i class="fa fa-spinner fa-spin"></i> Nav Item 5</a></li>
|
|
||||||
<li class="active"><a href="#examples"><i class="fa fa-circle fa-lg"></i> Nav Item 6</a></li>
|
|
||||||
<li class="active"><a href="#examples"><i class="fa fa-circle"></i> Nav Item 7</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="span3">
|
|
||||||
<ul class="nav nav-list">
|
|
||||||
<li>
|
|
||||||
<a href="#c1">
|
|
||||||
<i class="fa fa-chevron-right fa fa-fw pull-right"></i> Overview
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="#c1">
|
|
||||||
Overview
|
|
||||||
<i class="fa fa-chevron-right fa fa-fw pull-right"></i>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h3>Hide class directly on icons</h3>
|
|
||||||
<div class="row-fluid">
|
|
||||||
<div class="span6">
|
|
||||||
<div class="well">
|
|
||||||
<i class="hide fa fa-circle"></i> Icon should be hidden
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="span6">
|
|
||||||
<i class="hide fa fa-circle"></i> Icon should be hidden
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<h3>2x, 3x, 4x icons in text <small>should have margins next to and below text</small></h3>
|
|
||||||
<div class="row-fluid">
|
|
||||||
<div class="span6">
|
|
||||||
<p class="lead">
|
|
||||||
<i class="fa fa-stethoscope fa-3x pull-left fa-border"></i>
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="span6">
|
|
||||||
<p class="lead">
|
|
||||||
<i class="fa fa-ambulance fa-4x pull-right fa-border"></i>
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row-fluid">
|
|
||||||
<div class="span4">
|
|
||||||
<i class="fa fa-building-o fa-2x pull-left fa-border"></i>
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.
|
|
||||||
</div>
|
|
||||||
<div class="span4">
|
|
||||||
<i class="fa fa-stethoscope fa-3x pull-right fa-border"></i>
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.
|
|
||||||
</div>
|
|
||||||
<div class="span4">
|
|
||||||
<i class="fa fa-ambulance fa-4x pull-left"></i>
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<h3>Bullets <small>should wrap appropriately, have proper spacing</small></h3>
|
|
||||||
<div class="row-fluid">
|
|
||||||
<div class="span6">
|
|
||||||
<div style="border: solid 1px #d3d3d3;">
|
|
||||||
<ul class="fa-ul">
|
|
||||||
<li><i class="fa-li fa fa-angle-double-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
|
|
||||||
<li><i class="fa-li fa fa-arrow-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
|
|
||||||
<li><i class="fa-li fa fa-building-o"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
|
||||||
<i class="fa fa-building-o"></i>
|
|
||||||
<span class="label label-default">foo</span>
|
|
||||||
<a class="btn btn-default btn-mini">foo</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="span6">
|
|
||||||
<div style="border: solid 1px #d3d3d3;">
|
|
||||||
<ul class="fa-ul">
|
|
||||||
<li><i class="fa-li fa fa-angle-double-right fa-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
|
|
||||||
<li><i class="fa-li fa fa-arrow-right fa-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
|
|
||||||
<li><i class="fa-li fa fa-building-o fa-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
|
||||||
<i class="fa fa-building-o"></i>
|
|
||||||
<span class="label label-default">foo</span>
|
|
||||||
<a class="btn btn-default btn-mini">foo</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row-fluid">
|
|
||||||
<div class="span6">
|
|
||||||
<div style="border: solid 1px #d3d3d3;">
|
|
||||||
<ul class="fa-ul lead">
|
|
||||||
<li><i class="fa-li fa fa-angle-double-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
|
|
||||||
<li><i class="fa-li fa fa-arrow-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
|
|
||||||
<li><i class="fa-li fa fa-building-o"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="span6">
|
|
||||||
<div style="border: solid 1px #d3d3d3;">
|
|
||||||
<ul class="fa-ul lead">
|
|
||||||
<li><i class="fa-li fa fa-angle-double-right fa-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
|
|
||||||
<li><i class="fa-li fa fa-arrow-right fa-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
|
|
||||||
<li><i class="fa-li fa fa-building-o fa-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row-fluid">
|
|
||||||
<div class="span6">
|
|
||||||
<div style="border: solid 1px #d3d3d3;">
|
|
||||||
<ul class="fa-ul">
|
|
||||||
<li><a href="#"><i class="fa-li fa fa-angle-double-right"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
|
|
||||||
<li><a href="#"><i class="fa-li fa fa-arrow-right"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
|
|
||||||
<li><a href="#"><i class="fa-li fa fa-building-o"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="span6">
|
|
||||||
<div style="border: solid 1px #d3d3d3;">
|
|
||||||
<ul class="fa-ul">
|
|
||||||
<li><a href="#"><i class="fa-li fa fa-angle-double-right fa-lg"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
|
|
||||||
<li><a href="#"><i class="fa-li fa fa-arrow-right fa-lg"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
|
|
||||||
<li><a href="#"><i class="fa-li fa fa-building-o fa-lg"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row-fluid">
|
|
||||||
<div class="span6">
|
|
||||||
<div style="border: solid 1px #d3d3d3;">
|
|
||||||
<ul class="fa-ul">
|
|
||||||
<li><i class="fa-li fa fa-refresh fa-spin"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
|
|
||||||
<li><i class="fa-li fa fa-spinner fa-spin"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
|
|
||||||
<li><i class="fa-li fa fa-spinner fa-spin"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
|
||||||
<i class="fa fa-building-o"></i>
|
|
||||||
<span class="label label-default">foo</span>
|
|
||||||
<a class="btn btn-default btn-mini">foo</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="span6">
|
|
||||||
<div style="border: solid 1px #d3d3d3;">
|
|
||||||
<ul class="fa-ul">
|
|
||||||
<li><i class="fa-li fa fa-refresh fa-spin fa-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
|
|
||||||
<li><i class="fa-li fa fa-spinner fa-spin fa-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
|
|
||||||
<li><i class="fa-li fa fa-spinner fa-spin fa-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
|
||||||
<i class="fa fa-building-o"></i>
|
|
||||||
<span class="label label-default">foo</span>
|
|
||||||
<a class="btn btn-default btn-mini">foo</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="row-fluid">
|
|
||||||
<div class="span6">
|
|
||||||
<div style="border: solid 1px #d3d3d3;">
|
|
||||||
<ul>
|
|
||||||
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
|
|
||||||
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
|
|
||||||
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="span6">
|
|
||||||
<div style="border: solid 1px #d3d3d3;">
|
|
||||||
<ul>
|
|
||||||
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
|
|
||||||
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
|
|
||||||
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<h3>Spinning icons <small>icons should be aligned well and on center, buttons should be same height, won't work in ie7</small></h3>
|
|
||||||
<div style="border: solid 1px #d3d3d3;">
|
|
||||||
<i class="fa fa-refresh fa-spin"></i> Loading...
|
|
||||||
<button class="btn btn-default btn-small"><i class="fa fa-refresh fa-spin"></i> Loading...</button>
|
|
||||||
<button class="btn btn-default btn-small">Loading...</button>
|
|
||||||
<i class="fa fa-circle-o fa-spin"></i> Loading...
|
|
||||||
<button class="btn btn-default btn-small"><i class="fa fa-circle-o fa-spin"></i> Loading...</button>
|
|
||||||
<a href="#"><i class="fa fa-refresh fa-spin"></i> Loading...</a>
|
|
||||||
</div>
|
|
||||||
<div style="border: solid 1px #d3d3d3;">
|
|
||||||
<i class="fa fa-refresh fa-spin"></i> Loading...
|
|
||||||
<button class="btn btn-default"><i class="fa fa-refresh fa-spin"></i> Loading...</button>
|
|
||||||
<button class="btn btn-default">Loading...</button>
|
|
||||||
<i class="fa fa-circle-o fa-spin"></i> Loading...
|
|
||||||
<button class="btn btn-default"><i class="fa fa-circle-o fa-spin"></i> Loading...</button>
|
|
||||||
</div>
|
|
||||||
<div style="border: solid 1px #d3d3d3;">
|
|
||||||
<i class="fa fa-spinner fa-spin"></i> Loading...
|
|
||||||
<button class="btn btn-default btn-large"><i class="fa fa-spinner fa-spin"></i> Loading...</button>
|
|
||||||
<button class="btn btn-default btn-large">Loading...</button>
|
|
||||||
<i class="fa fa-circle-o fa-spin"></i> Loading...
|
|
||||||
<button class="btn btn-default btn-large"><i class="fa fa-circle-o fa-spin"></i> Loading...</button>
|
|
||||||
</div>
|
|
||||||
<h4>fa-lg</h4>
|
|
||||||
<div style="border: solid 1px #d3d3d3;">
|
|
||||||
<i class="fa fa-refresh fa-lg fa-spin"></i> Loading...
|
|
||||||
<button class="btn btn-default btn-small"><i class="fa fa-refresh fa-lg fa-spin"></i> Loading...</button>
|
|
||||||
<button class="btn btn-default btn-small">Loading...</button>
|
|
||||||
<i class="fa fa-circle-o fa-lg fa-spin"></i> Loading...
|
|
||||||
<button class="btn btn-default btn-small"><i class="fa fa-circle-o fa-lg fa-spin"></i> Loading...</button>
|
|
||||||
</div>
|
|
||||||
<div style="border: solid 1px #d3d3d3;">
|
|
||||||
<i class="fa fa-refresh fa-lg fa-spin"></i> Loading...
|
|
||||||
<button class="btn btn-default"><i class="fa fa-refresh fa-lg fa-spin"></i> Loading...</button>
|
|
||||||
<button class="btn btn-default">Loading...</button>
|
|
||||||
<i class="fa fa-circle-o fa-lg fa-spin"></i> Loading...
|
|
||||||
<button class="btn btn-default"><i class="fa fa-circle-o fa-lg fa-spin"></i> Loading...</button>
|
|
||||||
</div>
|
|
||||||
<div style="border: solid 1px #d3d3d3;">
|
|
||||||
<i class="fa fa-spinner fa-lg fa-spin"></i> Loading...
|
|
||||||
<button class="btn btn-default btn-large"><i class="fa fa-spinner fa-lg fa-spin"></i> Loading...</button>
|
|
||||||
<button class="btn btn-default btn-large">Loading...</button>
|
|
||||||
<i class="fa fa-circle-o fa-lg fa-spin"></i> Loading...
|
|
||||||
<button class="btn btn-default btn-large"><i class="fa fa-circle-o fa-lg fa-spin"></i> Loading...</button>
|
|
||||||
</div>
|
|
||||||
<h4>Bootstrap Prepend and Append</h4>
|
|
||||||
<div class="row">
|
|
||||||
<div class="span6">
|
|
||||||
<div class="input-prepend">
|
|
||||||
<span class="add-on"><i class="fa fa-spinner fa fa-spin"></i></span>
|
|
||||||
<input class="span2" id="prependedInput" type="text" placeholder="Username">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="span6">
|
|
||||||
<div class="input-append">
|
|
||||||
<input class="span2" id="appendedInput" type="text">
|
|
||||||
<span class="add-on"><i class="fa fa-spinner fa fa-spin"></i></span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<h3>Stacked icons</h3>
|
|
||||||
<div class="well">
|
|
||||||
{% include tests/stacked.html %}
|
|
||||||
</div>
|
|
||||||
<div class="well lead">
|
|
||||||
{% include tests/stacked.html %}
|
|
||||||
</div>
|
|
||||||
<h4>Stacked icons inside anchor</h4>
|
|
||||||
<div class="well">
|
|
||||||
{% include tests/stacked-inside-anchor.html %}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<h3>Mirrored and rotated icons</h3>
|
|
||||||
<div class="row-fluid">
|
|
||||||
<div class="span6">
|
|
||||||
<div class="well">
|
|
||||||
{% include tests/rotated-flipped.html %}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="span6">
|
|
||||||
<div class="well lead">
|
|
||||||
{% include tests/rotated-flipped.html %}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<h4>Mirrored and rotated icons inside anchors and buttons</h4>
|
|
||||||
<div class="row-fluid">
|
|
||||||
<div class="span6">
|
|
||||||
<div class="well">
|
|
||||||
{% include tests/rotated-flipped-inside-anchor.html %}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="span6">
|
|
||||||
<div class="well">
|
|
||||||
{% include tests/rotated-flipped-inside-btn.html %}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<div class="push"><!-- necessary for sticky footer --></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
|
|
||||||
<script src="//netdna.bootstrapcdn.com/bootstrap/2.3.2/js/bootstrap.min.js"></script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
|
|
||||||
@ -6,8 +6,7 @@ relative_path: ../../
|
|||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<link rel="stylesheet" href="{{ page.relative_path }}assets/css/site.css">
|
<link rel="stylesheet" href="{{ page.relative_path }}assets/css/site.css">
|
||||||
<link rel="stylesheet" href="{{ page.relative_path }}assets/font-awesome/css/font-awesome.css">
|
<link rel="stylesheet" href="{{ page.relative_path }}assets/fork-awesome/css/fork-awesome.css">
|
||||||
<script src="https://use.fonticons.com/ffe176a3.js"></script>
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|||||||
@ -1,62 +0,0 @@
|
|||||||
---
|
|
||||||
relative_path: ../../../
|
|
||||||
---
|
|
||||||
|
|
||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.css" />
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<h1>4.4.0</h1>
|
|
||||||
<table>
|
|
||||||
<tr>
|
|
||||||
<td><i class="fa fa-1x fa-file-pdf-o"></i></td>
|
|
||||||
<td><i class="fa fa-1x fa-cog"></i></td>
|
|
||||||
<td><i class="fa fa-1x fa-shield"></i></td>
|
|
||||||
<td><i class="fa fa-1x fa-ship"></i></td>
|
|
||||||
<td><i class="fa fa-1x fa-angle-double-up"></i></td>
|
|
||||||
<td><i class="fa fa-1x fa-angle-double-down"></i></td>
|
|
||||||
<td><i class="fa fa-1x fa-file-o"></i></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><i class="fa fa-2x fa-file-pdf-o"></i></td>
|
|
||||||
<td><i class="fa fa-2x fa-cog"></i></td>
|
|
||||||
<td><i class="fa fa-2x fa-shield"></i></td>
|
|
||||||
<td><i class="fa fa-2x fa-ship"></i></td>
|
|
||||||
<td><i class="fa fa-2x fa-angle-double-up"></i></td>
|
|
||||||
<td><i class="fa fa-2x fa-angle-double-down"></i></td>
|
|
||||||
<td><i class="fa fa-2x fa-file-o"></i></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><i class="fa fa-3x fa-file-pdf-o"></i></td>
|
|
||||||
<td><i class="fa fa-3x fa-cog"></i></td>
|
|
||||||
<td><i class="fa fa-3x fa-shield"></i></td>
|
|
||||||
<td><i class="fa fa-3x fa-ship"></i></td>
|
|
||||||
<td><i class="fa fa-3x fa-angle-double-up"></i></td>
|
|
||||||
<td><i class="fa fa-3x fa-angle-double-down"></i></td>
|
|
||||||
<td><i class="fa fa-3x fa-file-o"></i></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><i class="fa fa-4x fa-file-pdf-o"></i></td>
|
|
||||||
<td><i class="fa fa-4x fa-cog"></i></td>
|
|
||||||
<td><i class="fa fa-4x fa-shield"></i></td>
|
|
||||||
<td><i class="fa fa-4x fa-ship"></i></td>
|
|
||||||
<td><i class="fa fa-4x fa-angle-double-up"></i></td>
|
|
||||||
<td><i class="fa fa-4x fa-angle-double-down"></i></td>
|
|
||||||
<td><i class="fa fa-4x fa-file-o"></i></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><i class="fa fa-5x fa-file-pdf-o"></i></td>
|
|
||||||
<td><i class="fa fa-5x fa-cog"></i></td>
|
|
||||||
<td><i class="fa fa-5x fa-shield"></i></td>
|
|
||||||
<td><i class="fa fa-5x fa-ship"></i></td>
|
|
||||||
<td><i class="fa fa-5x fa-angle-double-up"></i></td>
|
|
||||||
<td><i class="fa fa-5x fa-angle-double-down"></i></td>
|
|
||||||
<td><i class="fa fa-5x fa-file-o"></i></td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
@ -1,62 +0,0 @@
|
|||||||
---
|
|
||||||
relative_path: ../../../
|
|
||||||
---
|
|
||||||
|
|
||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css" />
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<h1>4.5.0</h1>
|
|
||||||
<table>
|
|
||||||
<tr>
|
|
||||||
<td><i class="fa fa-1x fa-file-pdf-o"></i></td>
|
|
||||||
<td><i class="fa fa-1x fa-cog"></i></td>
|
|
||||||
<td><i class="fa fa-1x fa-shield"></i></td>
|
|
||||||
<td><i class="fa fa-1x fa-ship"></i></td>
|
|
||||||
<td><i class="fa fa-1x fa-angle-double-up"></i></td>
|
|
||||||
<td><i class="fa fa-1x fa-angle-double-down"></i></td>
|
|
||||||
<td><i class="fa fa-1x fa-file-o"></i></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><i class="fa fa-2x fa-file-pdf-o"></i></td>
|
|
||||||
<td><i class="fa fa-2x fa-cog"></i></td>
|
|
||||||
<td><i class="fa fa-2x fa-shield"></i></td>
|
|
||||||
<td><i class="fa fa-2x fa-ship"></i></td>
|
|
||||||
<td><i class="fa fa-2x fa-angle-double-up"></i></td>
|
|
||||||
<td><i class="fa fa-2x fa-angle-double-down"></i></td>
|
|
||||||
<td><i class="fa fa-2x fa-file-o"></i></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><i class="fa fa-3x fa-file-pdf-o"></i></td>
|
|
||||||
<td><i class="fa fa-3x fa-cog"></i></td>
|
|
||||||
<td><i class="fa fa-3x fa-shield"></i></td>
|
|
||||||
<td><i class="fa fa-3x fa-ship"></i></td>
|
|
||||||
<td><i class="fa fa-3x fa-angle-double-up"></i></td>
|
|
||||||
<td><i class="fa fa-3x fa-angle-double-down"></i></td>
|
|
||||||
<td><i class="fa fa-3x fa-file-o"></i></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><i class="fa fa-4x fa-file-pdf-o"></i></td>
|
|
||||||
<td><i class="fa fa-4x fa-cog"></i></td>
|
|
||||||
<td><i class="fa fa-4x fa-shield"></i></td>
|
|
||||||
<td><i class="fa fa-4x fa-ship"></i></td>
|
|
||||||
<td><i class="fa fa-4x fa-angle-double-up"></i></td>
|
|
||||||
<td><i class="fa fa-4x fa-angle-double-down"></i></td>
|
|
||||||
<td><i class="fa fa-4x fa-file-o"></i></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><i class="fa fa-5x fa-file-pdf-o"></i></td>
|
|
||||||
<td><i class="fa fa-5x fa-cog"></i></td>
|
|
||||||
<td><i class="fa fa-5x fa-shield"></i></td>
|
|
||||||
<td><i class="fa fa-5x fa-ship"></i></td>
|
|
||||||
<td><i class="fa fa-5x fa-angle-double-up"></i></td>
|
|
||||||
<td><i class="fa fa-5x fa-angle-double-down"></i></td>
|
|
||||||
<td><i class="fa fa-5x fa-file-o"></i></td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
@ -5,7 +5,7 @@ relative_path: ../../../
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<link rel="stylesheet" href="{{ page.relative_path }}assets/font-awesome/css/font-awesome.css">
|
<link rel="stylesheet" href="{{ page.relative_path }}assets/fork-awesome/css/fork-awesome.css">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
layout: base
|
layout: base
|
||||||
title: Font Awesome Visual Test Cases
|
title: Fork Awesome Visual Test Cases
|
||||||
relative_path: ../
|
relative_path: ../
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user