mirror of
https://github.com/FortAwesome/Font-Awesome.git
synced 2024-12-28 06:21:30 +08:00
getting responsive layout in place
This commit is contained in:
parent
53c8b30ca7
commit
30d83f7517
@ -1,4 +1,4 @@
|
||||
<ul class="margin-bottom-none">
|
||||
<ul class="margin-bottom-none padding-left-lg">
|
||||
<li>All brand icons are trademarks of their respective owners.</li>
|
||||
<li>The use of these trademarks does not indicate endorsement of the trademark holder by Font Awesome, nor vice versa.</li>
|
||||
</ul>
|
||||
|
@ -1,11 +1,11 @@
|
||||
<section id="animated-spinner">
|
||||
<h2 class="page-header">Animated Spinner</h2>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<div class="col-md-3 col-sm-4">
|
||||
Use the <code>fa-spin</code> class to get any icon to rotate. Works well with <code>fa-spinner</code>,
|
||||
<code>fa-refresh</code>, and <code>fa-cog</code>.
|
||||
</div>
|
||||
<div class="col-md-9">
|
||||
<div class="col-md-9 col-sm-8">
|
||||
<div class="well well-large well-transparent lead">
|
||||
<i class="fa fa-spinner fa-spin fa-lg"></i> Spinner icon when loading content...
|
||||
</div>
|
||||
|
@ -1,13 +1,13 @@
|
||||
<section id="bordered-pulled">
|
||||
<h2 class="page-header">Bordered & Pulled Icons</h2>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<div class="col-md-3 col-sm-4">
|
||||
<p>
|
||||
Use <code>fa-border</code> and <code>pull-right</code> or <code>pull-left</code> for easy pull quotes or
|
||||
article graphics.
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-9">
|
||||
<div class="col-md-9 col-sm-8">
|
||||
<div class="well well-large well-transparent">
|
||||
<i class="fa fa-quote-left fa-4x pull-left fa-muted"></i>
|
||||
Use a few of the new styles together, and you've got easy pull quotes or a great introductory article image.
|
||||
|
@ -1,7 +1,7 @@
|
||||
<section id="button-dropdowns">
|
||||
<h2 class="page-header">Button Dropdowns</h2>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<div class="col-md-3 col-sm-4">
|
||||
<div class="btn-group open">
|
||||
<a class="btn btn-primary" href="#"><i class="fa fa-user"></i> User</a>
|
||||
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
|
||||
@ -15,7 +15,7 @@
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-9">
|
||||
<div class="col-md-9 col-sm-8">
|
||||
{% highlight html %}
|
||||
<div class="btn-group open">
|
||||
<a class="btn btn-primary" href="#"><i class="fa fa-user"></i> User</a>
|
||||
|
@ -1,7 +1,7 @@
|
||||
<section id="button-groups">
|
||||
<h2 class="page-header">Button Groups</h2>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<div class="col-md-3 col-sm-4">
|
||||
<p>
|
||||
<div class="btn-group">
|
||||
<a class="btn btn-default" href="#"><i class="fa fa-align-left"></i></a>
|
||||
@ -11,7 +11,7 @@
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-9">
|
||||
<div class="col-md-9 col-sm-8">
|
||||
{% highlight html %}
|
||||
<div class="btn-group">
|
||||
<a class="btn btn-default" href="#"><i class="fa fa-align-left"></i></a>
|
||||
|
@ -1,7 +1,7 @@
|
||||
<section id="buttons">
|
||||
<h2 class="page-header">Buttons</h2>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<div class="col-md-3 col-sm-4">
|
||||
<p>
|
||||
<a class="btn btn-default" href="#">
|
||||
<i class="fa fa-repeat"></i> Reload</a>
|
||||
@ -29,7 +29,7 @@
|
||||
<i class="fa fa-refresh fa-spin"></i> Synchronizing Content...</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-9">
|
||||
<div class="col-md-9 col-sm-8">
|
||||
<p>
|
||||
Font Awesome icons work great in buttons. You can even combine them with larger icon styles,
|
||||
<code>pull-right</code> and <code>pull-left</code>, and <code>fa-spin</code>.
|
||||
|
@ -1,10 +1,10 @@
|
||||
<section id="custom">
|
||||
<h2 class="page-header">Custom CSS</h2>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<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">
|
||||
<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">
|
||||
|
@ -1,7 +1,7 @@
|
||||
<section id="form-inputs">
|
||||
<h2 class="page-header">Prepended & Appended Form Inputs</h2>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<div class="col-md-3 col-sm-4">
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon"><i class="fa fa-envelope"></i></span>
|
||||
<input class="form-control" type="text" placeholder="Email address">
|
||||
@ -12,7 +12,7 @@
|
||||
<input class="form-control" type="password" placeholder="Password">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-9">
|
||||
<div class="col-md-9 col-sm-8">
|
||||
{% highlight html %}
|
||||
<form>
|
||||
<div class="input-prepend">
|
||||
|
@ -1,10 +1,10 @@
|
||||
<section id="inline-icons">
|
||||
<h2 class="page-header">Inline Icons</h2>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<div class="col-md-3 col-sm-4">
|
||||
<p>Place Font Awesome icons just about anywhere with the <code><i></code> tag.</p>
|
||||
</div>
|
||||
<div class="col-md-9">
|
||||
<div class="col-md-9 col-sm-8">
|
||||
<div class="well well-transparent">
|
||||
<div style="font-size: 24px; line-height: 1.5em;">
|
||||
<i class="fa fa-camera-retro"></i> icon-camera-retro
|
||||
|
@ -1,13 +1,13 @@
|
||||
<section id="larger-icons">
|
||||
<h2 class="page-header">Larger Icons</h2>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<div class="col-md-3 col-sm-4">
|
||||
<p>
|
||||
To increase the size of icons relative to its container, use <code>fa-lg</code>, <code>fa-2x</code>,
|
||||
<code>fa-3x</code>, or <code>fa-4x</code>.
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-9">
|
||||
<div class="col-md-9 col-sm-8">
|
||||
<p>
|
||||
Increase the icon size by using the <code>fa-lg</code> (33% increase), <code>fa-2x</code>,
|
||||
<code>fa-3x</code>, or <code>fa-4x</code> classes.
|
||||
|
@ -1,7 +1,7 @@
|
||||
<section id="list-bullets">
|
||||
<h2 class="page-header">List Bullets</h2>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<div class="col-md-3 col-sm-4">
|
||||
<ul class="fa-ul">
|
||||
<li><i class="fa-li fa fa-ok"></i>List bullets (like these)</li>
|
||||
<li><i class="fa-li fa fa-ok"></i>Buttons</li>
|
||||
@ -11,7 +11,7 @@
|
||||
<li><i class="fa-li fa fa-ok"></i>…and many more with custom CSS</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-9">
|
||||
<div class="col-md-9 col-sm-8">
|
||||
<p>Easily replace individual list bullets.</p>
|
||||
{% highlight html %}
|
||||
<ul class="fa-ul">
|
||||
|
@ -1,7 +1,7 @@
|
||||
<section id="navigation">
|
||||
<h2 class="page-header">Navigation</h2>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<div class="col-md-3 col-sm-4">
|
||||
<ul class="nav nav-pills nav-stacked">
|
||||
<li class="active"><a href="#"><i class="fa fa-home fa-fixed-width"></i> Home</a></li>
|
||||
<li><a href="#"><i class="fa fa-book fa-fixed-width"></i> Library</a></li>
|
||||
@ -9,7 +9,7 @@
|
||||
<li><a href="#"><i class="fa fa-cogs fa-fixed-width"></i> Settings</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-9">
|
||||
<div class="col-md-9 col-sm-8">
|
||||
<p>Use Font Awesome icons in navigation to provide helpful visual cues.</p>
|
||||
{% highlight html %}
|
||||
<ul class="nav nav-pills nav-stacked">
|
||||
|
@ -1,7 +1,7 @@
|
||||
<{% if page.navbar_active == "examples" %}div{% else %}section{% endif %} id="new-styles">
|
||||
<h2 class="page-header">New Styles in {{ site.fontawesome.minor_version }}</h2>
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<div class="col-md-4 col-sm-6">
|
||||
<h4><a href="#rotated-flipped">Rotated and Flipped Icons</a></h4>
|
||||
<div class="well well-transparent">
|
||||
<i class="fa fa-shield"></i> normal<br>
|
||||
@ -12,10 +12,10 @@
|
||||
<i class="fa fa-shield fa-flip-vertical"></i> fa-flip-vertical
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="col-md-4 col-sm-6">
|
||||
<h4><a href="#stacked">Stacked Icons</a></h4>
|
||||
<div class="well well-transparent">
|
||||
<div class="margin-top margin-bottom">
|
||||
<div class="margin-top-sm margin-bottom-sm">
|
||||
<span class="fa-stack">
|
||||
<i class="fa fa-unchecked fa-stack-base"></i>
|
||||
<i class="fa fa-twitter"></i>
|
||||
@ -30,11 +30,16 @@
|
||||
<i class="fa fa-sign-blank fa-stack-base"></i>
|
||||
<i class="fa fa-terminal fa-light"></i>
|
||||
</span>
|
||||
fa-terminal on fa-sign-blank
|
||||
</div>
|
||||
fa-terminal on fa-sign-blank<br>
|
||||
<span class="fa-stack">
|
||||
<i class="fa fa-camera"></i>
|
||||
<i class="fa fa-ban-circle fa-stack-base text-danger"></i>
|
||||
</span>
|
||||
fa-camera on fa-ban-circle
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="col-md-4 col-sm-6 col-sm-offset-3">
|
||||
<h4><a href="#bulleted-lists">Better Bulleted Lists</a></h4>
|
||||
<div class="well well-transparent">
|
||||
<ul class="fa-ul">
|
||||
|
@ -1,10 +1,10 @@
|
||||
<section id="rotated-flipped">
|
||||
<h2 class="page-header">Rotated & Flipped</h2>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<div class="col-md-3 col-sm-4">
|
||||
A set of classes that can be used to arbitrarily rotate and flip icons.
|
||||
</div>
|
||||
<div class="col-md-9">
|
||||
<div class="col-md-9 col-sm-8">
|
||||
<div class="well well-large well-transparent lead">
|
||||
<i class="fa fa-shield"></i> normal<br>
|
||||
<i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90<br>
|
||||
|
@ -1,11 +1,11 @@
|
||||
<section id="stacked">
|
||||
<h2 class="page-header">Stacked Icons</h2>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<div class="col-md-3 col-sm-4">
|
||||
A method for easily stacking multiple icons. Use the <code>fa-stack</code> class on the parent and
|
||||
<code>fa-stack-base</code> for the bottom icon.
|
||||
</div>
|
||||
<div class="col-md-9">
|
||||
<div class="col-md-9 col-sm-8">
|
||||
<div class="well well-large well-transparent lead">
|
||||
<span class="fa-stack">
|
||||
<i class="fa fa-check-empty fa-stack-base"></i>
|
||||
|
@ -9,7 +9,7 @@
|
||||
{% assign icons_brand = icons | expand_aliases | category:"Brand Icons" | sort_by:'class' %}
|
||||
|
||||
{% for icon in icons_brand %}
|
||||
<div class="col-md-3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ site.fontawesome.css_prefix }}-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div>
|
||||
<div class="col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ site.fontawesome.css_prefix }}-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</section>
|
||||
|
@ -5,7 +5,7 @@
|
||||
{% assign icons_currency = icons | expand_aliases | category:"Currency Icons" | sort_by:'class' %}
|
||||
|
||||
{% for icon in icons_currency %}
|
||||
<div class="col-md-3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ site.fontawesome.css_prefix }}-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div>
|
||||
<div class="col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ site.fontawesome.css_prefix }}-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
|
@ -5,7 +5,7 @@
|
||||
{% assign icons_directional = icons | expand_aliases | category:"Directional Icons" | sort_by:'class' %}
|
||||
|
||||
{% for icon in icons_directional %}
|
||||
<div class="col-md-3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ site.fontawesome.css_prefix }}-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div>
|
||||
<div class="col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ site.fontawesome.css_prefix }}-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
|
@ -5,7 +5,7 @@
|
||||
{% assign icons_medical = icons | expand_aliases | category:"Medical Icons" | sort_by:'class' %}
|
||||
|
||||
{% for icon in icons_medical %}
|
||||
<div class="col-md-3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ site.fontawesome.css_prefix }}-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div>
|
||||
<div class="col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ site.fontawesome.css_prefix }}-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
|
@ -11,7 +11,7 @@
|
||||
{% assign icons_new = icons | expand_aliases | version:site.fontawesome.minor_version %}
|
||||
|
||||
{% for icon in icons_new %}
|
||||
<div class="col-md-3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ site.fontawesome.css_prefix }}-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div>
|
||||
<div class="col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ site.fontawesome.css_prefix }}-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
|
@ -5,7 +5,7 @@
|
||||
{% assign icons_text_editor = icons | expand_aliases | category:"Text Editor Icons" | sort_by:'class' %}
|
||||
|
||||
{% for icon in icons_text_editor %}
|
||||
<div class="col-md-3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ site.fontawesome.css_prefix }}-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div>
|
||||
<div class="col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ site.fontawesome.css_prefix }}-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
|
@ -5,7 +5,7 @@
|
||||
{% assign icons_video_player = icons | expand_aliases | category:"Video Player Icons" | sort_by:'class' %}
|
||||
|
||||
{% for icon in icons_video_player %}
|
||||
<div class="col-md-3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ site.fontawesome.css_prefix }}-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div>
|
||||
<div class="col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ site.fontawesome.css_prefix }}-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
|
@ -5,7 +5,7 @@
|
||||
{% assign icons_web_application = icons | expand_aliases | category:"Web Application Icons" | sort_by:'class' %}
|
||||
|
||||
{% for icon in icons_web_application %}
|
||||
<div class="col-md-3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ site.fontawesome.css_prefix }}-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div>
|
||||
<div class="col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ site.fontawesome.css_prefix }}-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
|
@ -1,7 +1,7 @@
|
||||
<div class="jumbotron jumbotron-carousel hidden-print">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-8 text-center">
|
||||
<div class="col-md-8 col-sm-8 text-center">
|
||||
<h1>Font Awesome</h1>
|
||||
<p>The iconic font designed for Bootstrap</p>
|
||||
<div class="actions">
|
||||
@ -19,7 +19,7 @@
|
||||
Created & Maintained by <a href="http://twitter.com/{{ site.fontawesome.author.twitter }}">Dave Gandy</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="col-md-4 col-sm-4">
|
||||
<div id="icon-carousel" class="carousel slide">
|
||||
<!-- Carousel items -->
|
||||
<div class="carousel-inner">
|
||||
|
@ -1,10 +1,6 @@
|
||||
<section class="hidden-print">
|
||||
<div class="row stripe-ad">
|
||||
<div class="col-md-8">
|
||||
{{ stripe_ad_content }}
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
{% include ads/carbon-light-horizontal.html %}
|
||||
</div>
|
||||
<div class="stripe-ad">
|
||||
{% include ads/carbon-light-horizontal.html %}
|
||||
{{ stripe_ad_content }}
|
||||
</div>
|
||||
</section>
|
||||
|
@ -5,13 +5,13 @@
|
||||
open source community. If you'd like, here are a couple of ways you can tell me thanks for all my hard work.
|
||||
</p>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="col-md-6 col-sm-6">
|
||||
<h3><a href="https://www.gittip.com/davegandy/"><i class="fa fa-gittip"></i> Tip me on Gittip</a></h3>
|
||||
<p>
|
||||
Gittip is a great way to let developers know you appreciate their work.
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="col-md-6 col-sm-6">
|
||||
<h3><a href="http://amzn.com/w/G64X58AY416W" target="_blank">My Amazon Wish List</a></h3>
|
||||
<p>
|
||||
Or pick something straight
|
||||
|
@ -1,21 +1,21 @@
|
||||
<section id="thanks-to">
|
||||
<h2 class="page-header">Thanks To</h2>
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<div class="col-md-4 col-sm-4">
|
||||
<p>
|
||||
Thanks to <a href="https://twitter.com/robmadole/">@robmadole</a> and
|
||||
<a href="https://twitter.com/supercodepoet/">@supercodepoet</a> for icon design
|
||||
review, advice, some Jekyll help, and being all around badass coders.
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="col-md-4 col-sm-4">
|
||||
<p>
|
||||
Thanks to <a href="https://twitter.com/grantgordon">@grantgordon</a> and
|
||||
<a href="https://twitter.com/johnsmclay">@johnsmclay</a> for developing and hosting
|
||||
<a href="http://icnfnt.com/">icnfnt</a>, the best way to subset Font Awesome.
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="col-md-4 col-sm-4">
|
||||
<p>
|
||||
Thanks to <a href="http://maxcdn.com"><i class="fa fa-maxcdn"></i> MaxCDN</a> for providing the excellent
|
||||
<a href="http://www.bootstrapcdn.com/#tab_fontawesome">BootstrapCDN</a>, the fastest and easiest way to
|
||||
|
@ -1,39 +1,39 @@
|
||||
<div id="why" class="feature-list">
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<div class="col-md-4 col-sm-6">
|
||||
<h4><i class="fa fa-flag"></i> One Font, {{ icons | size }} Icons</h4>
|
||||
In a single collection, Font Awesome is a pictographic language of web-related actions.
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="col-md-4 col-sm-6">
|
||||
<h4><i class="fa fa-pencil"></i> CSS Control</h4>
|
||||
Easily style icon color, size, shadow, and anything that's possible with CSS.
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="col-md-4 col-sm-6">
|
||||
<h4><i class="fa fa-fullscreen"></i> Infinite Scalability</h4>
|
||||
Scalable vector graphics means every icon looks awesome at any size.
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="col-md-4 col-sm-6">
|
||||
<h4><i class="fa fa-microphone"></i> Free, as in Speech</h4>
|
||||
Font Awesome is completely free for commercial use. Check out the <a href="{{ page.relative_path }}license/">license</a>.
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="col-md-4 col-sm-6">
|
||||
<h4><i class="fa fa-ok"></i> IE7 Support</h4>
|
||||
Font Awesome supports IE7. If you need it, you have my condolences.
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="col-md-4 col-sm-6">
|
||||
<h4><i class="fa fa-eye-open"></i> Perfect on Retina Displays</h4>
|
||||
Font Awesome icons are vectors, which mean they're gorgeous on high-resolution displays.
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="col-md-4 col-sm-6">
|
||||
<h4><i class="fa fa-thumbs-up-alt"></i> Made for Bootstrap</h4>
|
||||
Designed from scratch to be fully compatible with <a href="{{ site.bootstrap.url }}">Bootstrap {{ site.bootstrap.version }}</a>.
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="col-md-4 col-sm-6">
|
||||
<h4><i class="fa fa-desktop"></i> Desktop Friendly</h4>
|
||||
To use on the desktop or for a complete set of vectors,
|
||||
check out the <a href="{{ page.relative_path }}cheatsheet/">cheatsheet</a>.
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="col-md-4 col-sm-6">
|
||||
<h4><i class="fa fa-search"></i> Screen Reader Compatible</h4>
|
||||
Font Awesome won't trip up screen readers, unlike other icon fonts.
|
||||
</div>
|
||||
|
@ -3,5 +3,7 @@
|
||||
background: @table-bg-accent;
|
||||
border-color: @table-border-color;
|
||||
border-radius: (@border-radius-base);
|
||||
float: right;
|
||||
margin-left: @buffer-lg;
|
||||
}
|
||||
}
|
||||
|
@ -1,57 +1,57 @@
|
||||
@size-none: 0px;
|
||||
@size-sm: 5px;
|
||||
@size-md: 10px;
|
||||
@size-lg: 22px;
|
||||
@buffer-none: 0px;
|
||||
@buffer-sm: 5px;
|
||||
@buffer-md: 10px;
|
||||
@buffer-lg: 22px;
|
||||
|
||||
.padding-none { padding: @size-none !important; }
|
||||
.padding { padding: @size-md !important; }
|
||||
.padding-sm { padding: @size-sm !important; }
|
||||
.padding-lg { padding: @size-lg !important; }
|
||||
.padding-none { padding: @buffer-none !important; }
|
||||
.padding { padding: @buffer-md !important; }
|
||||
.padding-sm { padding: @buffer-sm !important; }
|
||||
.padding-lg { padding: @buffer-lg !important; }
|
||||
|
||||
.padding-top-none { padding-top: @size-none !important; }
|
||||
.padding-top { padding-top: @size-md !important; }
|
||||
.padding-top-sm { padding-top: @size-sm !important; }
|
||||
.padding-top-lg { padding-top: @size-lg !important; }
|
||||
.padding-top-none { padding-top: @buffer-none !important; }
|
||||
.padding-top { padding-top: @buffer-md !important; }
|
||||
.padding-top-sm { padding-top: @buffer-sm !important; }
|
||||
.padding-top-lg { padding-top: @buffer-lg !important; }
|
||||
|
||||
.padding-right-none { padding-right: @size-none !important; }
|
||||
.padding-right { padding-right: @size-md !important; }
|
||||
.padding-right-sm { padding-right: @size-sm !important; }
|
||||
.padding-right-lg { padding-right: @size-lg !important; }
|
||||
.padding-right-none { padding-right: @buffer-none !important; }
|
||||
.padding-right { padding-right: @buffer-md !important; }
|
||||
.padding-right-sm { padding-right: @buffer-sm !important; }
|
||||
.padding-right-lg { padding-right: @buffer-lg !important; }
|
||||
|
||||
.padding-bottom-none { padding-bottom: @size-none !important; }
|
||||
.padding-bottom { padding-bottom: @size-md !important; }
|
||||
.padding-bottom-sm { padding-bottom: @size-sm !important; }
|
||||
.padding-bottom-lg { padding-bottom: @size-lg !important; }
|
||||
.padding-bottom-none { padding-bottom: @buffer-none !important; }
|
||||
.padding-bottom { padding-bottom: @buffer-md !important; }
|
||||
.padding-bottom-sm { padding-bottom: @buffer-sm !important; }
|
||||
.padding-bottom-lg { padding-bottom: @buffer-lg !important; }
|
||||
|
||||
.padding-left-none { padding-left: @size-none !important; }
|
||||
.padding-left { padding-left: @size-md !important; }
|
||||
.padding-left-sm { padding-left: @size-sm !important; }
|
||||
.padding-left-lg { padding-left: @size-lg !important; }
|
||||
.padding-left-none { padding-left: @buffer-none !important; }
|
||||
.padding-left { padding-left: @buffer-md !important; }
|
||||
.padding-left-sm { padding-left: @buffer-sm !important; }
|
||||
.padding-left-lg { padding-left: @buffer-lg !important; }
|
||||
|
||||
.margin-none { margin: @size-none !important; }
|
||||
.margin { margin: @size-md !important; }
|
||||
.margin-sm { margin: @size-sm !important; }
|
||||
.margin-lg { margin: @size-lg !important; }
|
||||
.margin-none { margin: @buffer-none !important; }
|
||||
.margin { margin: @buffer-md !important; }
|
||||
.margin-sm { margin: @buffer-sm !important; }
|
||||
.margin-lg { margin: @buffer-lg !important; }
|
||||
|
||||
.margin-top-none { margin-top: @size-none !important; }
|
||||
.margin-top { margin-top: @size-md !important; }
|
||||
.margin-top-lg { margin-top: @size-lg !important; }
|
||||
.margin-top-sm { margin-top: @size-sm !important; }
|
||||
.margin-top-none { margin-top: @buffer-none !important; }
|
||||
.margin-top { margin-top: @buffer-md !important; }
|
||||
.margin-top-lg { margin-top: @buffer-lg !important; }
|
||||
.margin-top-sm { margin-top: @buffer-sm !important; }
|
||||
|
||||
.margin-right-none { margin-right: @size-none !important; }
|
||||
.margin-right { margin-right: @size-md !important; }
|
||||
.margin-right-lg { margin-right: @size-lg !important; }
|
||||
.margin-right-sm { margin-right: @size-sm !important; }
|
||||
.margin-right-none { margin-right: @buffer-none !important; }
|
||||
.margin-right { margin-right: @buffer-md !important; }
|
||||
.margin-right-lg { margin-right: @buffer-lg !important; }
|
||||
.margin-right-sm { margin-right: @buffer-sm !important; }
|
||||
|
||||
.margin-bottom-none { margin-bottom: @size-none !important; }
|
||||
.margin-bottom { margin-bottom: @size-md !important; }
|
||||
.margin-bottom-lg { margin-bottom: @size-lg !important; }
|
||||
.margin-bottom-sm { margin-bottom: @size-sm !important; }
|
||||
.margin-bottom-none { margin-bottom: @buffer-none !important; }
|
||||
.margin-bottom { margin-bottom: @buffer-md !important; }
|
||||
.margin-bottom-lg { margin-bottom: @buffer-lg !important; }
|
||||
.margin-bottom-sm { margin-bottom: @buffer-sm !important; }
|
||||
|
||||
.margin-left-none { margin-left: @size-none !important; }
|
||||
.margin-left { margin-left: @size-md !important; }
|
||||
.margin-left-lg { margin-left: @size-lg !important; }
|
||||
.margin-left-sm { margin-left: @size-sm !important; }
|
||||
.margin-left-none { margin-left: @buffer-none !important; }
|
||||
.margin-left { margin-left: @buffer-md !important; }
|
||||
.margin-left-lg { margin-left: @buffer-lg !important; }
|
||||
.margin-left-sm { margin-left: @buffer-sm !important; }
|
||||
|
||||
.border-left-none { border-left: none !important; }
|
||||
.border-right-none { border-right: none !important; }
|
||||
|
@ -1,7 +1,7 @@
|
||||
.stripe-ad {
|
||||
margin-bottom: 22px;
|
||||
.lead {
|
||||
margin-top: 10px;
|
||||
margin-right: 30px;
|
||||
padding-top: 10px;
|
||||
padding-right: 30px;
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user